Новинки DevTools (Chrome 106)

Published on Updated on

Translated to: English, Español, Português, 한국어, 中文, 日本語

Переводы предоставлены Alena Batitskaia. Редактор — Maxim Salnikov.

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

Группировка по авторским и развёрнутым файлам во вкладке Источники (Sources)

Опция Сгруппировать по авторским и развёрнутым (Group files by Authored / Deployed) теперь показывается по клику на иконку меню   More. Раньше она отображалась прямо на панели навигации.

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

Сгруппировать по авторским и развёрнутым

Задача в трекере Chromium: 1352488

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

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

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

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

// application.component.ts

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

}

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

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

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

Под капотом этого улучшения скрывается новая возможность “Async Stack Tagging”, представленная в DevTools. Вы можете рассказать полную историю операции при помощи связывания обеих частей асинхронного кода с помощью нового метода console.createTask(). Прочитайте Modern debugging in DevTools, чтобы узнать больше.

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

Задача в трекере Chromium: 1334585

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

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

Откройте демо и нажмите на кнопку +. Разверните ошибку в консоли. Трассировка стека покажет только ваш код (например, app.component.ts и button.component.ts). Нажмите Показать ещё фреймы (Show more frames), чтобы увидеть полную трассировку стека.

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

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

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

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

Если же вы предпочитаете видеть полную трассировку стека, то можете отключить эту настройку в Настройки (Settings) > Список игнорируемых фреймворков (Ignore list) > Автоматически добавлять известные сторонние скрипты в список игнорируемых (Automatically add known third-party scripts to ignore list).

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

Задача в трекере Chromium: 1323199

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

С настройкой Автоматически добавлять известные сторонние скрипты в список игнорируемых (Automatically add known third-party scripts to ignore list) стек вызовов теперь показывает только фреймы, относящиеся к вашему коду.

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

Чтобы увидеть все фреймы, нажмите на Показать фреймы из списка игнорируемых (Show ignore-listed frames). Раньше DevTools отключал все фреймы по умолчанию.

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

Задача в трекере Chromium: 1352488

Скрытие источников из списка игнорируемых во вкладке Источники (Sources)

Включите настроку Скрыть источники из списка игнорируемых (Hide ignore-listed sources), чтобы спрятать нерелевантные файлы в панели Навигация (Navigation).

Откройте это демо. Перейдите на вкладку Источники (Sources). node_modules и webpack — сторонние скрипты. Нажмите на иконку меню   More   и выберите Скрыть источники из списка игнорируемых (Hide ignore-listed sources), чтобы спрятать такие файлы из дерева навигации.

Скрытие источников из списка игнорируемых во вкладке Источники (Sources)

Задача в трекере Chromium: 1352488

Благодаря настройке Скрыть источники из списка игнорируемых (Hide ignore-listed sources) вы можете быстрее искать свои файлы в Меню Команд. Раньше поиск в Меню Команд (Command Menu) показывал сторонние файлы, которые могли быть нерелевантны для вас.

Для примера включите настройку Скрыть источники из списка игнорируемых (Hide ignore-listed sources) и нажмите на иконку меню   More. Выберите Открыть файл (Open file). Напишите «ton» чтобы начать поиск компонента кнопки. Раньше в результатх поиска показывались бы файлы из node_modules. Один из файлов из node_modules был бы показан первым в списке результатов.

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

Задача в трекере Chromium: 1336604

Новый трек Взаимодействия (Interactions) во вкладке Производительность (Performance)

Используйте новый трек Взаимодействия (Interactions) во вкладке Производительность (Performance), чтобы визуализировать взаимодействия и отследить потенциальные проблемы с отзывчивостью.

Например, начните запись производительности на этой демо-странице. Кликните на кофе и остановите запись. Два взаимодействия будут показаны на треке Взаимодействия (Interactions). Оба взаимодействия имеют одинаковый ID, показывая, что взаимодействия произошли от одного действия пользователя.

Трек Взаимодействия во вкладке Производительность

Задача в трекере Chromium: 1347390

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

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

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

Задача в трекере Chromium: 1351735

Автоматическая генерация стандартного имени для записи во вкладке Recorder

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

Стандартное имя для новой записи во вкладке Recorder

Задача в трекере Chromium: 1351383

Другие важные моменты

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

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

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

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

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

  • Отправьте нам предложение или отзыв через crbug.com.
  • Сообщите о проблеме, связанной с DevTools, используя Больше опций (More options)   More   > Справка (Help) > Сообщить о проблемах в инструментах разработчика (Report a DevTools issues) в DevTools.
  • Твитните на @ChromeDevTools.
  • Оставьте комментарии под What's new in DevTools видео на YouTube.

Больше новинок DevTools

Чтобы увидеть полный список обновлений, перейдите на английскую версию по ссылке What's New In DevTools. Ниже перечислены материалы, переведенные на русский язык.

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Updated on Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.