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

Что нового в Devtools

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