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

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

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

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

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

Задача в трекере 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 — сторонние скрипты. Нажмите на иконку меню     и выберите Скрыть источники из списка игнорируемых (Hide ignore-listed sources), чтобы спрятать такие файлы из дерева навигации.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Ранее расширение Recorder во вкладке Recorder периодически не показывалось. (1351416)

• Во вкладке Стили (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)     > Справка (Help) > Сообщить о проблемах в инструментах разработчика (Report a DevTools issues) в DevTools.
• Твитните на @ChromeDevTools.
• Оставьте комментарии под What's new in DevTools видео на YouTube.

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

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

# Chrome 110

• Очистка вкладки Производительность при перезагрузке
• Обновления Регистратора (Recorder)
• Просмотр и подсветка кода в пользовательском сценарии в Регистраторе
• Настройка типов селекторов записи
• Редактирование пользовательского сценария во время записи
• Автоматическое красивое форматирование внутри файла
• Улучшенная подсветка синтаксиса и встроенный предварительный просмотр для Vue, SCSS и других
• Эргономичное и единообразное автодополнения в Консоли (Console)
• Другие важные моменты

# Chrome 109

• Recorder: опции копирования для шага, воспроизведение на странице, контекстное меню шага
• Показ настоящих названий функций в записях производительности
• Новые горячие клавиши во вкладках Консоль (Console) и Источники (Sources)
• Улучшенная отладка JavaScript
• Другие важные моменты
• [Эксперимент] Улучшенный UX в интерфейсе управления точками останова
• [Эксперимент] Автоматическое красивое форматирование внутри файла

# Chrome 108

• Подсказки для неактивных CSS-свойств
• Автоматическое определение XPath и текстовых селекторов во вкладке Recorder
• Пошаговое выполнение выражений, разделенных запятыми
• Улучшенные настройки Списка игнорируемых фреймворков
• Другие важные моменты

# Chrome 107

• Кастомизация сочетаний клавиш в DevTools
• Переключение между светлой и тёмной темами по сочетанию клавиш
• Подсветка объектов C/C++ в Инспекторе памяти (Memory Inspector)
• Поддержка полной информации об инициаторе для импорта HAR
• Начало поиска по DOM по нажатию по Enter
• Отображение иконок start и end для свойства флексбокса align-content
• Другие важные моменты

# Chrome 106

• Группировка по авторским и развёрнутым файлам во вкладке Источники (Sources)
• Связанные трассировки стека для асинхронных операций
• Автоматическое игнорирование известных сторонних скриптов
• Улучшен стек вызовов во время отладки
• Скрытие источников из списка игнорируемых во вкладке Источники (Sources)
• Скрытие игнорируемых файлов из Меню Команд (Command Menu)
• Новый трек Взаимодействия (Interactions) во вкладке Производительность (Performance)
• Разбивка по времени LCP во вкладке Performance Insights
• Автоматическая генерация стандартного имени для записи во вкладке Recorder
• Другие важные моменты

# Chrome 105

• Пошаговое воспроизведение в Recorder
• Поддержка события mouse over во вкладке Recorder
• Самое крупное существенное отображение (LCP) во вкладке Performance Insights
• Определение миганий текста (FOIT, FOUT) как потенциальных первопричин сдвигов раскладки
• Обработчик протоколов в панели Манифест
• Значок верхнего слоя во вкладке Элементы
• Прикрепление сведений для отладки Wasm во время исполнения
• Поддержка редактирования во время отладки
• Отображение и редактирование директивы @scope в панели Стили
• Улучшения карты источников
• Другие важные моменты

# Chrome 104

• Перезапуск фрейма во время отладки
• Опции замедленного воспроизведения во вкладке Recorder
• Создание расширений для вкладки Recorder
• Группировка по Авторским (Authored) и Развёрнутым (Deployed) файлам во вкладке Источники (Sources)
• Новый трек User Timings во вкладке Performance insights
• Отображение элемента с назначенным слотом
• Симуляция аппаратного параллелизма при записи Производительности (Performance)
• Предпросмотр нецветовых значений при автодополнении переменных CSS
• Определение блокирующего фрейма на панели Возвратного кэша (Back/forward cache)
• Улучшены подсказки автодополнения для объектов JavaScript
• Улучшение карт источников
• Другие важные моменты

# Chrome 103

• Запись событий двойного клика и клика правой кнопкой мыши во вкладке Recorder
• Новые режимы Анализа временного диапазона (timespan) и Сводки (snapshot) во вкладке Lighthouse
• Улучшено управление масштабированием во вкладке Performance Insights
• Подтверждение удаления записи производительности
• Изменение порядка панелей во вкладке Элементы (Elements)
• Выбор цвета вне браузера
• Улучшен предварительный просмотр значений в строке при отладке
• Поддержка больших объектов BLOB для виртуальных аутентификаторов
• Новые сочетания клавиш во вкладке Источники (Sources)
• Улучшения карты исходников

# Chrome 102

• Ранний доступ: Новая панель анализа производительности
• Новые горячие клавиши для эмуляции светлой и тёмной темы
• Улучшение безопасности на вкладке Предварительный просмотр (Preview) панели Сеть (Network)
• Улучшена перезагрузка в точке останова
• Обновления консоли
• Отмена записи пользовательского сценария в самом начале
• Отображение наследуемых псевдоэлементов выделения в панели Стили (Styles)
• Другие важные моменты
• [Эксперимент] Копирование изменений в CSS
• [Эксперимент] Выбор цвета вне браузера

# Chrome 101

• Импорт и экспорт записей действий пользователя в виде JSON файла
• Просмотр каскадных слоёв во вкладке Стили (Styles)
• Поддержка функции цвета hwb()
• Улучшено отображение приватных свойств
• Другие важные моменты
• [Эксперимент] Новые режимы временного промежутка и сводки во вкладке Lighthouse

# Chrome 100

• Просмотр и изменение директивы @supports в панели Стилей (Styles)
• Дефолтная поддержка распространённых селекторов
• Кастомизация селектора записи
• Переименование записи
• Предпросмотр свойств класса/функции при наведении курсора
• Частично представленные фреймы во вкладке Производительность (Performance)
• Другие важные моменты

# Chrome 99

• Троттлинг запросов WebSocket
• Новая панель Reporting API во вкладке Приложение (Application)
• Поддержка ожидания момента, когда элемент становится видимым/кликабельным во вкладке Recorder
• Улучшенный внешний вид, форматирование и фильтрация в консоли
• Отладка расширений Chrome с помощью карта источников
• Улучшено дерево папок источников во вкладке Источники (Sources)
• Отображение исходных файлов воркеров во вкладке Источники (Sources)
• Обновление автоматической тёмной темы Chrome
• Удобные сенсорные палитра цветов и разделитель панелей
• Другие важные моменты

# Chrome 98

• Ранний доступ: дерево доступности на всю страницу (Full-page accessibility tree)
• Явное отображение изменений на вкладке Изменения (Changes)
• Устанавливайте более длительный тайм-аут для записи поведения пользователя
• Убедитесь, что ваши страницы кешируются с помощью вкладки Возвратный кеш (Back/forward cache)
• Новый фильтр в панели Свойства (Properties)
• Эмулируйте CSS-медиафункцию forced-colors
• Показ линейки при наведении курсора мыши
• Поддержка значений row-reverse и column-reverse в редакторе флексбоксов
• Новые сочетания клавиш для повторения запроса XHR и расширения всех результатов поиска
• Lighthouse 9 во вкладке Lighthouse
• Улучшенная вкладка Источники (Sources)
• Другие важные моменты
• [Эксперимент] Эндпоинты во вкладке Reporting API

# Chrome 97

• Ранний доступ: новая вкладка Recorder
• Обновлён список устройств в панели инструментов устройства (Device Mode)
• Автодополнение в режиме Редактировать как HTML (Edit as HTML)
• Улучшен процесс отладки кода
• Синхронизация настроек DevTools между устройствами

# Chrome 96

• Ранний доступ: Новая вкладка Обзор CSS
• Восстановлен и улучшен опыт редактирования и копирования длины в CSS
• Эмуляция CSS-медиафункции prefers-contrast
• Эмулируйте функцию создания автоматической тёмной темы в Chrome
• Копируйте объявления как JavaScript в панели Стилей (Styles)
• Новая вкладка Полезная нагрузка (Payload) на вкладке Сеть
• Улучшенное отображение свойств в панели Свойства (Properties)
• Опция для скрытия ошибок CORS в Консоли
• Правильный предварительный просмотр и оценка объектов Intl в Консоли
• Консистентные асинхронные трассировки стека
• Сохранение боковой колонки в Консоли
• Устаревшая панель Кэш приложения на вкладке Приложение
• [Эксперимент] Новая панель Reporting API на вкладке Приложение

# Chrome 95

• Новый инструмент выбора единиц измерения длины в CSS
• Скрытие задач во вкладке Проблемы (Issues)
• Улучшенное отображение свойств
• Lighthouse 8.4 во вкладке Lighthouse
• Сортировка снипетов во вкладке Источники (Sources)
• Новые ссылки на переводы обновлений и сообщение об ошибке в переводе
• Улучшенный UI для командного меню в DevTools

# Chrome 94

• Пользуйтесь DevTools на своём языке
• Новые устройства Nest Hub в списке девайсов
• Информация об origin trials в свойствах фрейма
• Новый значок для выражений от контейнера
• Новый чекбокс для инвертирования фильтров сети
• Предстоящее упразднение боковой колонки Console
• Отображение необработанных заголовков Set-Cookie во вкладках Issues и Network
• Последовательное отображение нативных аксессоров как собственных свойств в консоли
• Правильная трассировка стека ошибок для встроенных скриптов с #sourceURL
• Изменение формата цвета в панели Computed
• Замена кастомных всплывающих подсказок на нативные HTML-подсказки
• [Эксперимент] Скрытие задач во вкладке Issues

# Chrome 93

• Редактируемые выражения от контейнера в панели Styles
• Предварительный просмотр веб-бандлов во вкладке Network
• Отладка Attribution Reporting API
• Улучшенная работа со строками в консоли
• Улучшенная отладка CORS
• Lighthouse 8.1
• Отображение new_note_url в панели Manifest
• Исправление соответствия селекторам CSS
• Форматирование ответов JSON во вкладке Network