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

Кейси Баски

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

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

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

Поиск текста «управление кэшем» с помощью новой панели сетевого поиска.

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

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

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

Рисунок 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(), для запроса.

Рисунок 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() . Нажатие кнопки «Начать бесконечный цикл» запускает цикл do...while который никогда не останавливается. Интервал возобновляется, поскольку он не выполнялся при остановке текущего вызова JavaScript.Останавливаться был выбран.

Пользовательское время на вкладках «Производительность»

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

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

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

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

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

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

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

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

Рядом с экземпляром developers.google.com есть 2 значения: 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» .