Что нового в 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» .