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

Кейси Баск
Kayce Basques
X GitHub

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

Видеоверсия примечаний к выпуску :

Откройте панель «Сеть» , затем нажмите Command + F (Mac) или Control + F (Windows, Linux, ChromeOS), чтобы открыть новую панель «Поиск в сети» . DevTools будет искать в заголовках и телах всех сетевых запросов указанный вами запрос.

Поиск текста «cache-control» с помощью новой панели сетевого поиска.

Рисунок 1. Поиск элемента cache-control текста с помощью новой панели сетевого поиска.

Click Match Case Спичечный коробок Чтобы сделать ваш запрос чувствительным к регистру, нажмите « Использовать регулярное выражение» . Используйте регулярные выражения Чтобы отобразить все результаты, соответствующие указанному вами шаблону, вам не нужно заключать регулярное выражение в косые черты.

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

Рисунок 2. Запрос с использованием регулярного выражения в панели сетевого поиска.

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

Старый и новый пользовательский интерфейс.

Рисунок 3. Старый пользовательский интерфейс слева, новый пользовательский интерфейс справа.

Нажмите Command + Option + F (Mac) или Control + Shift + F (Windows, Linux, ChromeOS), чтобы открыть глобальный поиск . Вы также можете открыть его через меню Command .

Предварительный просмотр значений переменных CSS в панели «Стили» .

Когда значение свойства цвета CSS, такого как background-color или color , задано переменной CSS, в инструментах разработчика теперь отображается предварительный просмотр этого цвета.

Пример значений цвета, заданных переменными CSS.

Рисунок 4. В старом интерфейсе слева отсутствует предварительный просмотр цвета рядом с color: var(--main-color) , тогда как в новом интерфейсе справа он есть.

Скопировать как получить

Щелкните правой кнопкой мыши сетевой запрос, затем выберите «Копировать» > «Копировать как Fetch» , чтобы скопировать в буфер обмена код, эквивалентный функции fetch() для этого запроса.

Копирование кода, эквивалентного функции fetch(), для запроса.

Рисунок 5. Копирование кода, эквивалентного функции fetch() для запроса.

Инструменты разработчика генерируют код следующего вида:

fetch("https://preload.glitch.me/styles.css", {
  "credentials": "omit",
  "headers": {},
  "referrer": "https://preload.glitch.me/after/",
  "referrerPolicy": "no-referrer-when-downgrade",
  "body": null,
  "method": "GET",
  "mode": "cors"
});

Обновления от аудиторской комиссии

Новые аудиты

В отделе аудита появились 2 новых вида аудита, в том числе:

Новые параметры конфигурации

Теперь вы можете настроить панель аудита следующим образом:

  • Сохраните настройки области просмотра и пользовательского агента для настольных компьютеров. Другими словами, вы можете предотвратить имитацию мобильного устройства панелью аудита .
  • Отключить ограничение скорости сети и ресурсов процессора.
  • Сохраняйте данные в хранилищах, таких как LocalStorage и IndexedDB, при проведении аудитов.

Новые параметры настройки аудита.

Рисунок 6. Новые параметры конфигурации аудита.

Просмотреть трассировки

После проверки страницы нажмите «Просмотреть трассировку» , чтобы увидеть данные о производительности загрузки, на основе которых была проведена проверка, на панели «Производительность» .

Кнопка «Просмотреть трассировку».

Рисунок 7. Кнопка « Просмотр трассировки» .

Остановить бесконечные циклы

Если вы часто работаете с циклами for , do...while или рекурсией, вы, вероятно, по ошибке запускали бесконечный цикл при разработке своего сайта. Чтобы остановить бесконечный цикл, теперь вы можете:

  1. Откройте панель «Источники» .
  2. Нажмите «Пауза» Пауза Кнопка меняется на «Возобновить выполнение скрипта» . Резюме .
  3. Приостановить выполнение скриптаРезюме затем выберите " Остановить текущий вызов JavaScript" Останавливаться .

В видео выше часы обновляются с помощью таймера setInterval() . Нажатие кнопки Start Infinite Loop запускает цикл do...while , который никогда не останавливается. Интервал возобновляется, потому что он не работал, когда был остановлен при вызове Stop Current JavaScript Call.Останавливаться был выбран.

Время, затраченное пользователем, отображается на вкладке «Производительность».

При просмотре записи выступления щелкните раздел «Время пользователя» , чтобы просмотреть показатели времени пользователя на вкладках «Сводка» , «Снизу вверх» , «Дерево вызовов» и «Журнал событий» .

Просмотр показателей времени, отведенного пользователем, осуществляется на вкладке «Снизу вверх».

Рисунок 8. Просмотр показателей времени пользователя на вкладке «Снизу вверх» . Синяя полоса слева от раздела «Время пользователя» указывает на то, что он выбран.

В целом, теперь вы можете выбрать любой из разделов ( Основной поток , Время выполнения пользователем , GPU , ScriptStreamer и т. д.) и просмотреть активность этого раздела на вкладках.

Выберите экземпляры виртуальных машин JavaScript на панели «Память».

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

Скриншоты панели «Память» до и после.

Рисунок 9. В старом интерфейсе слева экземпляры виртуальных машин JavaScript скрыты за выпадающим меню «Цель» , тогда как в новом интерфейсе справа они отображаются в таблице «Выберите экземпляр виртуальной машины JavaScript».

Рядом с экземпляром developers.google.com указаны два значения: 8.7 MB и 13.3 MB . Левое значение представляет собой память, выделенную для JavaScript. Правое значение представляет собой всю память операционной системы, выделяемую для этого экземпляра виртуальной машины. Правое значение включает в себя левое значение. В диспетчере задач Chrome левое значение соответствует JavaScript Memory , а правое — Memory Footprint .

Вкладка «Сеть» переименована во вкладку «Страница».

На панели «Источники» вкладка «Сеть» теперь называется вкладкой «Страница» .

Два окна инструментов разработчика, расположенные рядом, демонстрируют изменение имени.

Рисунок 10. В старом интерфейсе слева вкладка, отображающая ресурсы страницы, называлась «Сеть» , тогда как в новом интерфейсе справа она называется «Страница».

Обновления темной темы

В Chrome 67 внесен ряд незначительных изменений в цветовую схему темной темы. Например, значки точек останова и текущей строки выполнения теперь отображаются зеленым цветом.

Скриншот нового значка точки останова и цветовой схемы текущей строки выполнения.

Рисунок 11. Скриншот нового значка точки останова и цветовой схемы текущей строки выполнения.

Прозрачность сертификатов в панели безопасности

Теперь панель безопасности предоставляет информацию о прозрачности сертификатов .

Информация о прозрачности сертификатов в панели «Безопасность».

Рисунок 12. Информация о прозрачности сертификации в панели «Безопасность».

Изоляция сайта на панели «Производительность»

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

Диаграммы пламени для каждого процесса в записи выступления.

Рисунок 13. Диаграммы пламени для каждого процесса в записи производительности.

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

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

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

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

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

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