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

Jecelyn Yeen

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

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

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

Ошибка Chromium: 1352488

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

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

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

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

// application.component.ts

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

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

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

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

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

Ошибка Chromium: 1334585

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

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

Откройте эту демонстрацию и нажмите кнопку «Increment». Разверните сообщение об ошибке в консоли . В трассировке стека отображается только ваш код (например, 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 ).

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

Ошибка Chromium: 1352488

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

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

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

Ошибка Chromium: 1352488

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

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

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

Ошибка Chromium: 1336604

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

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

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

Ошибка Chromium: 1347390

Разбивка времени LCP на панели Performance Insights

Панель «Анализ производительности» теперь отображает данные о времени отрисовки самого большого контента (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 .
• Сообщить о проблеме с DevTools можно с помощью функции more_vert Дополнительные параметры > Справка > Сообщить о проблеме с DevTools в DevTools.
• Напишите твит в @ChromeDevTools .
• Оставляйте комментарии в видеороликах YouTube «Что нового в DevTools» или YouTube «Советы по DevTools» .

Что нового в DevTools

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