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

Jecelyn Yeen

В панели «Источники» сгруппируйте файлы по дате создания/развертывания.

Теперь раздел « Группировка файлов по автору/развертыванию» отображается в меню с тремя точками. Ранее он отображался непосредственно в панели навигации.

Откройте эту демонстрацию . Включите параметр «Группировать файлы по автору/развертыванию» , чтобы сначала просматривать исходный код (авторский) и быстрее переходить к нему.

Ошибка Chromium: 1352488

Улучшены трассировки стека.

Связанные трассировки стека для асинхронных операций

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

Например, откройте эту демонстрацию и нажмите кнопку увеличения. Разверните сообщение об ошибке в консоли . В нашем исходном коде эта операция включает асинхронную операцию timeout .

// application.component.ts

async increment() {
    await Promise.resolve().then(() => timeout(100));
    …
}

Ранее трассировка стека показывала только ошибку, связанную с превышением времени ожидания. Она не указывала на «первопричину» этой операции.

В последних изменениях в инструментах разработчика теперь отображается информация о том, что операция инициируется событием onClick в компоненте кнопки, затем функцией increment , а затем операцией timeout.

В DevTools появилась новая функция «Асинхронная маркировка стека». Вы можете рассказать всю историю операции, связав обе части асинхронного кода с помощью нового метода console.createTask() . Подробнее см. раздел «Современная отладка в DevTools» .

Звучит сложно? Вовсе нет. В большинстве случаев планирование и асинхронное выполнение обрабатываются используемым вами фреймворком. В этом случае фреймворк сам использует API, вам не нужно об этом беспокоиться. (например, Angular реализовал эти изменения )

Ошибка Chromium: 1334585

Автоматически игнорировать известные сторонние скрипты

Благодаря автоматическому добавлению известных сторонних скриптов в список игнорирования, DevTools позволяет быстрее выявлять проблемы в коде во время отладки.

Откройте эту демонстрацию и нажмите кнопку увеличения. Разверните сообщение об ошибке в консоли . Трассировка стека показывает только ваш код (например, app.component.ts button.component.ts ). Нажмите «Показать больше кадров» , чтобы просмотреть полную трассировку стека.

Ранее трассировка стека включала сторонние скрипты, такие как zone.js и core.mjs . Это не ваш исходный код, они генерируются сборщиками (например, webpack) или фреймворками (например, Angular). На выявление первопричины ошибки уходило больше времени.

В фоновом режиме DevTools игнорирует сторонние скрипты на основе нового свойства x_google_ignoreList в картах исходного кода. Фреймворки и сборщики должны предоставлять эту информацию. См. пример использования: Улучшенная отладка Angular с помощью DevTools .

При желании, если вы предпочитаете всегда просматривать полные трассировки стека, вы можете отключить эту настройку в разделе «Настройки» > «Список игнорирования» > «Автоматически добавлять известные сторонние скрипты в список игнорирования» .

Ошибка Chromium: 1323199

Улучшен стек вызовов во время отладки.

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

Откройте этот пример и установите точку останова в функции increment() в файле app.component.ts . Нажмите кнопку increment на странице, чтобы активировать точку останова. Стек вызовов показывает только кадры из вашего кода (например, app.component.ts и button.component.ts ).

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

Ошибка Chromium: 1352488

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

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

Откройте эту демонстрацию . В панели «Источники» находятся файлы node_modules и webpack — это сторонние скрипты. Щелкните по меню с тремя точками и выберите «Скрыть источники, которые следует игнорировать» , чтобы скрыть их из панели.

Ошибка Chromium: 1352488

Скрытие файлов, внесенных в список игнорируемых, в командном меню.

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

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

Ошибка Chromium: 1336604

Новая ветка «Взаимодействия» на панели «Производительность».

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

Например, начните запись выступления на этой демонстрационной странице . Щелкните по кофе и остановите запись. В дорожке «Взаимодействия» отобразятся два взаимодействия. Оба взаимодействия имеют одинаковые идентификаторы, что указывает на то, что они инициированы одним и тем же действием пользователя.

Ошибка Chromium: 1347390

Анализ временных характеристик LCP на панели «Аналитика производительности»

На панели «Аналитика производительности» теперь отображается разбивка по времени выполнения операции Largest Contentful Paint (LCP) . Используйте эту информацию о времени выполнения, чтобы понять и определить возможности для улучшения производительности LCP.

Ошибка Chromium: 1351735

Автоматическое создание имени по умолчанию для записей на панели «Запись».

Теперь панель «Запись» автоматически генерирует имя для новых записей.

Ошибка Chromium: 1351383

Различные важные моменты

• Ранее расширения Recorder периодически не отображались на панели Recorder . ( 1351416 )
• В панели «Стили» теперь отображается палитра цветов для свойства stop-color элемента SVG <stop> . ( 1351096 )
• Выявите скрипты, вызывающие сбои в отображении макета , как потенциальные первопричины смещений макета на панели «Аналитика производительности» . ( 1343019 )
• Отображение критического пути для веб-шрифтов LCP на панели «Аналитика производительности» . ( 1350390 )

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

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

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

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

• Отправляйте нам свои отзывы и предложения по улучшению функционала на сайте crbug.com .
• Сообщить о проблеме в инструментах разработчика можно с помощью параметра more_vert. Дополнительные параметры > Справка > Сообщить о проблеме в инструментах разработчика .
• Напишите в Твиттере @ChromeDevTools .
• Оставляйте комментарии к видеороликам на YouTube «Что нового в инструментах разработчика» или «Советы по инструментам разработчика» на YouTube .

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

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