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

На панели «Сведения о производительности» теперь отображается разбивка по времени для самой большой отрисовки контента (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» .

,

ДЕКЕЛЯН ИН

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

Групповые файлы с помощью авторизованных / развернутых теперь показаны в меню 3-DOT. Ранее он показал непосредственно на панели навигации.

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

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

Хромий ошибка: 1352488

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

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

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

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

// application.component.ts

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

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

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

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

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

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

Хром -ошибка: 1334585

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

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

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

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

Автоматически игнорируйте известные сторонние сценарии в трассировке стека

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

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

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

Хром -ошибка: 1323199

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

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

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

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

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

Хромий ошибка: 1352488

Скрытие источников в списке игнорирования в панели источников

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

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

Скрытие источников в списке игнорирования в панели источников

Хромий ошибка: 1352488

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

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

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

Хром -ошибка: 1336604

Отслеживание новых взаимодействий на панели производительности

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

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

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

Хром -ошибка: 1347390

Последствия времени LCP на панели Performance Insights

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

Последствия времени LCP на панели Performance Insights

Хром -ошибка: 1351735

Авторопидный имя по умолчанию для записей на панели регистратора

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

Имя по умолчанию для записей на панели регистратора

Хром -ошибка: 1351383

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

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

Скачать каналы предварительного просмотра

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

Связаться с командой Chrome Devtools

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

  • Отправьте предложение или отзыв нам через crbug.com .
  • Сообщите о проблеме Devtools, используя больше вариантовБолее > Помощь > Сообщить о вопросах DevTools в DevTools.
  • Твит на @chromedevtools .
  • Оставьте комментарии к нашим новому в Devtools YouTube Videos или Devtools Советы на YouTube .

Что нового в Devtools

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

,

Jecelyn Yeen

Group files by Authored / Deployed in the Sources panel

The Group files by Authored / Deployed is now shown under the 3-dot menu. Previously, it showed directly on the navigation pane.

Open this demo . Enable the Group files by Authored / Deployed setting to view your original source code (Authored) first and navigate to them quicker.

Group files by Authored / Deployed

Chromium bug: 1352488

Improved stack traces

Linked stack traces for asynchronous operations

When some operations are scheduled to happen asynchronously, the stack traces in DevTools now tell the “full story” of the operation. Previously, it tells only part of the story.

For example, open this demo and click on the increment button. Expand the error message in Console . In our source code, the operation includes an async timeout operation.

// application.component.ts

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

Previously, the stack trace only showed the timeout operation. It did not show the “root cause” of the operation.

With the latest changes, DevTools now shows the operation originates from the onClick event in the button component, then the increment function, followed by the timeout operation.

Linked stack traces for asynchronous operations

Behind the scenes, DevTools introduced a new “Async Stack Tagging” feature. You can tell the whole story of the operation by linking both parts of the async code together with the new console.createTask() method. See Modern debugging in DevTools to learn more.

Does it sound complicated? Нисколько. Most of the time, the framework you are using handles the scheduling and async execution. In that case, it is up to the framework to use the API, you don't need to worry about it. (eg Angular implemented these changes )

Chromium bug: 1334585

Automatically ignore known third-party scripts

Identify issues in your code quicker during debugging because DevTools now automatically adds known third-party scripts to the ignore list.

Open this demo and click on the increment button. Expand the error message in Console . The stack trace shows only your code (eg app.component.ts button.component.ts ). Click Show more frames to view the full stack trace.

Previously, the stack trace included third-party scripts like zone.js and core.mjs . These are not your source code, they are generated by bundlers (eg webpack) or frameworks (eg Angular). It took a longer time to identify the root cause of an error.

Automatically ignore known third-party scripts in the stack trace

Behind the scenes, DevTools ignores third-party scripts based on the new x_google_ignoreList property in source maps. Frameworks and bundlers need to supply this information. See Case Study: Better Angular Debugging with DevTools .

Optionally, if you prefer to always view full stack traces, you can disable the setting via Settings > Ignore list > Automatically add known third-party scripts to ignore list .

Setting to automatically add known third-party scripts to ignore list

Chromium bug: 1323199

Improved call stack during debugging

With the Automatically add known third-party scripts to ignore list setting, the call stack now shows only frames that are relevant to your code.

Open this demo and set a breakpoint at the increment() function in app.component.ts . Click the increment button on the page to trigger the breakpoint. The call stack shows only frames from your code (eg app.component.ts and button.component.ts ).

To view all frames, enable Show ignore-listed frames . Previously, DevTools displayed all frames by default.

Improved call stack during debugging

Chromium bug: 1352488

Hiding ignore-listed sources in the Sources panel

Enable hide ignore-listed sources to hide irrelevant files in the Navigation pane. This way, you can focus only on your code.

Open this demo . In the Sources panel. The node_modules and webpack are the third-party scripts. Click on the 3-dot menu and select hide ignore-listed sources to hide them from the pane.

Hiding ignore-listed sources in the Sources panel

Chromium bug: 1352488

With the hide ignore-listed sources setting, you can find your file quicker with the Command Menu . Previously, searching files in the Command Menu returns third-party files that might not be relevant to you.

For example, enable the hide ignore-listed sources setting and click on the 3-dot menu. Select Open file . Type “ton” to search for button components. Previously, the results include files from node_modules , one of the node_modules files even shown up as the first result.

Hiding ignore-listed files in the Command Menu

Chromium bug: 1336604

New Interactions track in the Performance panel

Use the new Interactions track in the Performance panel to visualize interactions and track down potential responsiveness issues.

For example, start a performance recording on this demo page . Click on a coffee and stop recording. Two interactions show in the Interactions track. Both interactions have the same IDs, indicating the interactions are triggered from the same user interaction.

Interactions track in the Performance panel

Chromium bug: 1347390

LCP timings breakdown in the Performance Insights panel

The Performance Insights panel now shows the timings breakdown of the Largest Contentful Paint (LCP) . Use these timings information to understand and identify an opportunity to improve LCP performance.

LCP timings breakdown in the Performance Insights panel

Chromium bug: 1351735

Auto-generate default name for recordings in the Recorder panel

The Recorder panel now automatically generates a name for new recordings.

Default name for recordings in the Recorder panel

Chromium bug: 1351383

Miscellaneous highlights

  • Previously, Recorder extensions don't show up in the Recorder panel from time to time. ( 1351416 )
  • The Styles pane now displays a color picker for the SVG <stop> element's stop-color property. ( 1351096 )
  • Identify scripts causing layout thrashing as the potential root causes for layout shifts in the Performance Insights panel. ( 1343019 )
  • Display critical path for LCP web fonts in the Performance Insights panel. ( 1350390 )

Download the preview channels

Consider using the Chrome Canary , Dev or Beta as your default development browser. These preview channels give you access to the latest DevTools features, test cutting-edge web platform APIs, and find issues on your site before your users do!

Getting in touch with the Chrome DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • Submit a suggestion or feedback to us via crbug.com .
  • Report a DevTools issue using the More optionsБолее > Help > Report a DevTools issues in DevTools.
  • Tweet at @ChromeDevTools .
  • Leave comments on our What's new in DevTools YouTube videos or DevTools Tips YouTube videos .

What's new in DevTools

A list of everything that has been covered in the What's new in DevTools series.