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

Кейси Баск
Kayce Basques

В Chrome 61 появятся новые функции и существенные изменения в инструментах разработчика, в том числе:

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

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

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

Меню регулирования дроссельной заслонки

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

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

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

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

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

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

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

Просмотр времени кэширования ответов сервис-воркером.

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

Колонка «Кэшированное время»

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

Включите индикатор FPS в командном меню.

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

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

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

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

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

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

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

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

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

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

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

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

Свяжитесь с командой Chrome DevTools

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

Что нового в инструментах разработчика

Список всего, что было рассмотрено в серии статей «Что нового в инструментах разработчика» .