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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Копировать как извлечение

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

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

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

DevTools создает следующий код:

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. Просмотр показателей пользовательского времени на вкладке «Снизу вверх» . Синяя полоса слева от раздела «Пользовательское время» указывает на то, что он выбран.

В общем, теперь вы можете выбрать любой из разделов ( Main Thread , User Timing , GPU , ScriptStreamer и т. д.) и просмотреть активность этого раздела на вкладках.

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

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

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

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

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

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

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

Два окна DevTools рядом, демонстрирующие смену имени.

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

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

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

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

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

Прозрачность сертификата на панели «Безопасность»

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

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

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

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

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

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

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

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

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

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

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

Что нового в DevTools

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