Что нового в DevTools (Chrome 61)

Новые функции и основные изменения, которые появятся в DevTools в Chrome 61, включают:

Посмотрите видеоверсию примечаний к выпуску ниже или читайте дальше, чтобы узнать больше.

Имитация мобильных устройств начального и среднего уровня в режиме устройства.

Меню регулирования режима устройства теперь отображается по умолчанию и теперь позволяет моделировать мобильное устройство низкого или среднего уровня с помощью пары щелчков мышью.

Меню регулирования

Рисунок 1 . Меню регулирования

Определения меню регулирования

Рисунок 2 . Наведите указатель мыши на меню «Регулирование» или откройте меню «Настройки захвата» , чтобы просмотреть определения мобильных устройств среднего и низкого уровня.

Просмотр использования хранилища

В новом разделе «Использование» на вкладке «Очистить хранилище» панели «Приложение» показано, сколько места использует источник , а также максимальная квота для источника на этом устройстве.

Раздел «Использование»

Рисунок 3 . В разделе «Использование» показано, что https://airhorner.com использует 66,9 КБ из исходной квоты в 15 214 МБ.

Посмотреть, когда сервисный работник кэшировал ответы

Новый столбец «Время кэширования» на вкладке «Хранилище кэша» показывает, когда сервис-воркер кэшировал ответы.

Столбец «Время кэширования»

Рисунок 4 . Столбец «Время кэширования»

Включите счетчик FPS из меню команд.

Теперь вы можете включить счетчик FPS из командного меню .

Включение счетчика FPS из меню команд

Рисунок 5 . Включение счетчика FPS из меню команд

Установите поведение колесика мыши для масштабирования или прокрутки с помощью записей исполнения.

Откройте «Настройки» и установите новый параметр «Действие колесика мыши Flamechart», чтобы изменить поведение колесика мыши на панели «Производительность» .

Например, когда вы используете колесо мыши в разделе «Основной» записи или проводите двумя пальцами по трекпаду, по умолчанию происходит увеличение или уменьшение масштаба. Когда вы меняете настройку на «Прокрутка» , этот жест теперь прокручивает вверх или вниз.

Настройка «Действие колесика мыши Flamechart»

Рисунок 6 . Настройка действия колеса мыши Flamechart

Поддержка отладки модулей ES6

Модули ES6 изначально поставляются в Chrome 61. В отношении DevTools здесь мало что происходит, за исключением того, что отладка работает так, как и следовало ожидать. Попробуйте установить несколько точек останова и просмотреть реализацию TodoMVC в модуле ES6 Пола Айриша, чтобы убедиться в этом сами.

Загрузите предварительный просмотр каналов

Рассмотрите возможность использования Chrome Canary , Dev или Beta в качестве браузера для разработки по умолчанию. Эти каналы предварительного просмотра дают вам доступ к новейшим функциям DevTools, тестируют передовые API-интерфейсы веб-платформы и находят проблемы на вашем сайте раньше, чем это сделают ваши пользователи!

Связь с командой Chrome DevTools

Используйте следующие параметры, чтобы обсудить новые функции и изменения в публикации или что-либо еще, связанное с DevTools.

Что нового в DevTools

Список всего, что было описано в серии «Что нового в DevTools» .