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

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

# Пошаговое воспроизведение в Recorder

Теперь вы можете установить точку останова и пошагово воспроизвести пользовательский сценарий во вкладке Recorder.

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

С помощью этой функции вы можете полностью визуализировать и с легкостью отлаживать пользовательский сценарий.

Читайте подробнее в статье Recorder features reference.

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

# Поддержка события mouse over во вкладке Recorder

Recorder теперь поддерживает добавление в запись шага mouse over (hover).

В демо появляется всплывающее меню при наведении. Попробуйте записать пользовательский сценарий и во время записи кликните на пункт меню.

Если вы воспроизведёте запись сейчас, она проиграется с ошибкой, потому что Recorder не ловит событие наведения мыши автоматически во время записи. Чтобы решить эту проблему, вручную добавьте шаг, чтобы имитировать наведение курсора на пункт меню перед кликом.

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

# Самое крупное существенное отображение (LCP) во вкладке Performance Insights

LCP – это важная, ориентированная на пользователя метрика, замеряющая ощущаемую скорость нагрузки. Теперь вы можете отследить критические моменты и первопричины задержки отрисовки крупного существенного отображения (LCP).

В записи производительности кликните на значок LPC в Таймлайне (Timeline). В панели Details вы можете увидеть оценку LCP, узнать как поправить ресурсы, которые замедляют LPC, и посмотреть критический путь для ресурса LCP.

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

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

# Определение миганий текста (FOIT, FOUT) как потенциальных первопричин сдвигов раскладки

Во вкладке Performance Insights теперь распознаются мигания невидимого текста (FOIT) и мигания нестилизованного текста (FOUT) как потенциальные причины сдвига раскладки.

Чтобы увидеть потенциальные причины сдвига раскладки кликните на скриншот в Layout shifts.

Изучите статью Optimize WebFont loading and rendering, чтобы узнать о техниках предотвращения сдвига раскладки.

Задачи в трекере Chromium: 1334628, 1328873

# Обработчики протоколов в панели Манифест

Теперь вы можете использовать DevTools для тестирования регистрации обработчика протокола URL для прогрессивных веб-приложений (PWA).

Регистрация обработчика протокола URL позволяет установленным PWA обрабатывать ссылки, использующие определённый протокол (например magnet, web+example), для более полноценного опыта использования.

Перейдите в раздел Обработчики протоколов (Protocol Handlers) в панели Приложение (Application) > Манифест (Manifest). Здесь вы можете просмотреть и протестировать все доступные протоколы.

Например, установите это тестовое PWA. В разделе Обработчики протоколов (Protocol Handlers) введите «americano» и нажмите Тестировать протокол (Test protocol), чтобы открыть страницу с кофе в PWA.

Задачи в трекере Chromium: 1300613

# Значок верхнего слоя во вкладке Элементы

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

Элемент <dialog> недавно стал стабилен во всех браузерах. Когда вы открываете диалог, он помещается в верхний слой. Контент верхнего уровня отображается поверх всего остального контента.

В этом демо кликните на Open dialog.

Чтобы помочь визуализировать элементы верхнего слоя, DevTools добавляет контейнер верхнего слоя (#top-layer) в DOM-дерево. Он размещен после закрывающего тега </html>.

Чтобы перепрыгнуть с контейнера верхнего слоя на соответствующий элемент в дереве элементов, кликните на кнопку reveal рядом с контейнером или рядом с его подложкой внутри контейнера верхнего слоя.

Рядом с элементом верхнего слоя в дереве (например, элемент диалога) кликните на значок top-layer, чтобы переместиться на контейнер верхнего слоя.

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

# Прикрепление сведений для отладки Wasm во время исполнения

Теперь вы можете прикрепить отладочную информацию DWARF для wasm во время исполнения файла. Раньше на вкладке Источники (Sources) можно было прикрепить только карту источников для файлов JavaScript и Wasm.

Откройте файл Wasm во вкладке Источники (Sources). Кликните правой клавишей мыши в области редактора и выберите Добавить сведения для отладки DWARF… (Add DWARF debugging info…), чтобы прикрепить отладочную информацию по запросу.

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

# Поддержка редактирования во время отладки

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

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

С этим обновлением отладчик автоматически перезапускает функцию со следующими ограничениями:

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

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

# Отображение и редактирование директивы @scope в панели Стили

Теперь вы можете просматривать и редактировать CSS-директиву @scope в панели Стили (Styles).

Директива @scope является частью спецификации «CSS Cascading and Inheritance Level 6». Эти правила позволяют разработчикам группировать правила стилей в CSS.

Откройте эту демо-страницу и проинспектируйте гиперссылку внутри элемента <div class="dark-theme">. В панели Стили (Styles) просмотрите директиву @scope. Кликните на объявление правила, чтобы отредактировать его.

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

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

Вот несколько исправлений в картах источников для улучшения общего опыта отладки:

• DevTools теперь правильно распознает идентификаторы карт источников с пунктуацией. Некоторые современные минификаторы (например, esbuild) создают карты источников, объединяющие идентификаторы с помощью знаков препинания (запятая, круглые скобки, точка с запятой).

• DevTools теперь распознает имена карт источников для конструкторов с вызовом super.

• Исправлено индексирование URL карт источников при дублирующихся канонических URL. Ранее точки останова не активировались в некоторых файлах из-за дублирования канонических URL.

Задача в трекере Chromium: 1335338, 1333411

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

Вот несколько заслуживающих внимания исправлений в этом выпуске:

• Правильная реализация удаления пары ключ-значение локального хранилища из таблицы в панели Приложении (Application) > Локальное хранилище (Local Storage) при её удалении. (1339280)

• Предпросмотры цвета теперь отображается корректно при просмотре файлов CSS во вкладке Источники (Sources). Ранее их позиция была неверной. (1340062)

• Последовательное отображение флекс- и грид-элементов в панели Макет (Layout), а также отображение их в виде значков во вкладке Элементы (Elements). Ранее флекс- и грид-элементы случайным образом терялись в обоих местах. (1340441, 1273992)

• Новая ссылка Creator Ad Script теперь доступна для рекламных фреймов, если DevTools обнаружили скрипт, из-за которого фрейм был помечен как реклама. Вы можете открыть фрейм во вкладке Приложение (Application) > Фреймы (Frames). (1217041)

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

Рассмотрите возможность использования 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