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

Jecelyn Yeen

Группировка файлов по авторству/развертыванию на панели «Источники»

Группировка файлов по Авторству/Размещению теперь отображается под меню из 3 точек. Раньше она отображалась непосредственно на панели навигации.

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

Ошибка Chromium: 1352488

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

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

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

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

// application.component.ts

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

Раньше трассировка стека показывала только операцию тайм-аута. Она не показывала «первопричину» операции.

Благодаря последним изменениям DevTools теперь показывает, что операция начинается с события onClick в компоненте кнопки, затем следует функция increment , а затем операция тайм-аута.

За кулисами DevTools представил новую функцию «Async Stack Tagging». Вы можете рассказать всю историю операции, связав обе части асинхронного кода вместе с новым методом console.createTask() . См. Modern debugging in DevTools, чтобы узнать больше.

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

Ошибка Chromium: 1334585

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

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

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

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

За кулисами DevTools игнорирует сторонние скрипты на основе нового свойства x_google_ignoreList в исходных картах. Фреймворки и упаковщики должны предоставлять эту информацию. См. Case Study: Better Angular Debugging with DevTools .

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

Ошибка Chromium: 1323199

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

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

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

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

Ошибка Chromium: 1352488

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

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

Откройте эту демоверсию . На панели Sources . node_modules и webpack — это сторонние скрипты. Щелкните меню с тремя точками и выберите скрыть игнорируемые источники , чтобы скрыть их на панели.

Ошибка Chromium: 1352488

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

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

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

Ошибка Chromium: 1336604

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

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

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

Ошибка Chromium: 1347390

Разбивка таймингов LCP на панели Performance Insights

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

Ошибка хрома: 1351735

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

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

Ошибка Chromium: 1351383

Разные моменты

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

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

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

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

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

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

Что нового в DevTools

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