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

Kayce Basques

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

• Моделирование регулирования мобильных устройств . Установите регулирование ЦП и сети одновременно, чтобы имитировать мобильные устройства среднего или низкого уровня.
• Использование хранилища . Просмотрите объем хранилища, который использует источник, с разбивкой по технологиям (IndexedDB, кэш, локальный, сеансовый и т. д.).
• Временные метки кэша . Просмотрите, когда сервисный работник кэшировал ответ.
• Включите счетчик FPS в меню команд .
• Измените поведение колесика мыши и трекпада на панели «Производительность» .
• Отлаживайте модули ES6 собственными средствами .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Отправляйте нам отзывы и запросы на добавление новых функций на crbug.com .
• Сообщите о проблеме DevTools, используя more_vert Дополнительные параметры > Справка > Сообщить о проблеме DevTools в DevTools.
• Напишите в Твиттере @ChromeDevTools .
• Оставляйте комментарии к видеороликам YouTube «Что нового в DevTools» или «Советы разработчика» на YouTube .

Что нового в DevTools

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