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

Kayce Basques
Kayce Basques
X GitHub

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

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

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

Поиск текста cache-control на новой панели поиска в сети.

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

Нажмите Учитывать регистр Учитывать регистр, чтобы в запросе учитывался регистр. Нажмите Использовать регулярное выражение,Использовать регулярное выражение чтобы показать результаты, соответствующие заданному шаблону. Регулярные выражения не нужно заключать в косые черты.

Запрос регулярного выражения на панели "Поиск по сети".

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

Интерфейс панели Глобальный поиск теперь соответствует интерфейсу новой панели Поиск по сети. Кроме того, теперь результаты форматируются так, чтобы их было проще читать.

Старый и новый интерфейс.

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

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

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

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

Пример значений цвета переменной CSS.

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

Скопировать как fetch

Нажмите правой кнопкой мыши на сетевой запрос и выберите Копировать > Копировать как 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"
});

Обновления панели "Аудиты"

Новые проверки

На панели Audits (Аудиты) появилось два новых аудита:

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

Теперь на панели Аудиты можно:

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

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

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

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

После проверки страницы нажмите View Trace (Посмотреть трассировку), чтобы увидеть данные о скорости загрузки, на которых основана проверка, на панели Performance (Производительность).

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

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

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

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

  1. Откройте панель Источники.
  2. Нажмите Приостановить Приостановить. Кнопка изменится на Продолжить выполнение скрипта Продолжить.
  3. Удерживайте кнопку Resume Script Execution (Продолжить выполнение скрипта) Продолжить, а затем выберите Stop Current JavaScript Call (Остановить текущий вызов JavaScript) Остановить.

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

Пользовательское время на вкладках "Эффективность"

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

Просмотр показателей пользовательского времени на вкладке "Снизу вверх".

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

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

Как выбрать экземпляр виртуальной машины JavaScript на панели "Память"

На панели Память теперь четко перечислены все экземпляры виртуальной машины JavaScript, связанные со страницей, а не скрыты за раскрывающимся меню Цель, как раньше.

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

Рисунок 9. В старом интерфейсе слева экземпляры виртуальной машины JavaScript скрыты в раскрывающемся меню Target (Цель), а в новом интерфейсе справа они показаны в таблице Select JavaScript VM Instance (Выбрать экземпляр виртуальной машины 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. Эти предварительные версии каналов дают доступ к новейшим функциям инструментов разработчика, позволяют тестировать передовые API веб-платформ и помогают находить проблемы на сайте до того, как с ними столкнутся пользователи.

Как связаться с командой инструментов разработчика Chrome

Ниже перечислены способы обсудить новые функции, обновления и другие вопросы, связанные с инструментами разработчика.

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

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