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

Джеселин Йен

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

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

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

Группировать файлы по авторским/развернутым

Ошибка хрома: 1352488.

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

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

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

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

// application.component.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Настройка автоматического добавления известных сторонних скриптов в список игнорирования

Ошибка хрома: 1323199.

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

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

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

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

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

Ошибка хрома: 1352488.

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

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

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

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

Ошибка хрома: 1352488.

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

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

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

Ошибка хрома: 1336604.

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

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

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

Отслеживание взаимодействий на панели «Производительность»

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

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

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

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

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

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

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

Имя по умолчанию для записей на панели «Рекордер»

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

Разное

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

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

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

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

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

Что нового в DevTools

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