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

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

# Ранний доступ: дерево доступности на всю страницу (Full-page accessibility tree)

Новая функция Дерево доступности на всю страницу (Full-page accessibility tree) облегчает обзор полностраничного дерева доступности и помогает лучше понять, как ваш веб-контент работает со вспомогательными технологиями.

Во вкладке Элементы (Elements) откройте панель Специальные возможности (Accessibility) и поставьте галочку в чекбоксе Дерево доступности на всю страницу (Full-page accessibility tree). После этого перезагрузите DevTools, и вы увидите новую кнопку во вкладке Элементы (Elements).

Вы можете нажать на нее, чтобы включить режим Дерево доступности на всю страницу. Вы можете развернуть отдельные узлы или посмотреть подробности в панели Специальные возможности (Accessibility).

Выберите узел и переключитесь обратно в представление дерева DOM. Теперь выбран соответствующий узел DOM. Это отличный способ понять, как отображается узел DOM в дереве доступности. Это работает и для дерева DOM ⬌ Представление дерева доступности!

Раньше дерево доступности было доступно в панели Специальные возможности (Accessibility). Область обзора была ограниченной, можно было исследовать только один элемент и его потомков.

Наша команда все еще активно работает над этой новой функцией. Мы ждем ваши отзывы для дальнейших улучшений.

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

# Явное отображение изменений на вкладке Изменения (Changes)

Изменения кода на вкладке Изменения (Changes) автоматически форматируются.

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

Задачи в трекере Chromium: 1238818, 1268754 , 1086491

# Устанавливайте более длительный тайм-аут для записи поведения пользователя

Теперь вы можете настроить параметр Timeout во вкладке Recorder для всех шагов или конкретного шага. Это особенно полезно для страниц с медленными сетевыми запросами и длительной анимацией.

Например, мы записали поведение пользователя на этой демо-странице при загрузке и клике на пункт меню. Однако загрузка пунктов меню происходит медленно (6 секунд). Воспроизведение replay этой записи не удалось, поскольку она превышает 5 секунд (тайм-аут по умолчанию).

Мы можем использовать новую настройку Timeout чтобы исправить это. Откройте детали шага, в котором мы нажимаем на пункт меню. Редактируйте шаг, нажав кнопку Add timeout и установите значение 6000 миллисекунд (равно 6 секундам).

По желанию вы можете настроить Timeout для всех шагов в меню Replay settings. Раскройте настройки Replay settings и измените значение Timeout.

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

# Убедитесь, что ваши страницы кешируются с помощью вкладки Возвратный кеш (Back/forward cache)

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

Новая вкладка Возвратный кеш (Back/forward cache) поможет протестировать ваши страницы, чтобы убедиться, что они оптимизированы для возвратного кеша, или выявить проблемы, которые этому препятствуют.

Чтобы протестировать конкретную страницу, перейдите на неё в Chrome и затем в DevTools откройте Приложение (Application) > Возвратный кеш (Back-forward Cache). Далее, нажмите кнопку Test back/forward cache, и DevTools попытается произвести переход на предыдущую страницу и обратно, чтобы проверить, может ли страница быть восстановлена из кеша.

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

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

# Новый фильтр в панели Свойства (Properties)

Если вы хотите сфокусироваться на конкретном свойстве в панели Свойства (Properties), вы теперь можете ввести название нужного свойства или его значение в новом текстовом поле Фильтр (Filter).

По умолчанию свойства, чьи значения равны null или undefined, не отображаются. Поставьте галочку в чекбоксе Показывать все (Show all), чтобы увидеть все свойства.

Эти нововведения позволят вам быстрее добраться до объектов, которые вам интересны, и тем самым повысить вашу продуктивность!

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

# Эмулируйте CSS-медиафункцию forced-colors

Медиафункция forced-colors в CSS используется для определения того, активировал ли пользовательский агент режим принудительного выбора цветов в браузере (например, режим высокой контрастности в Windows). В этом режиме к странице применяется ограниченная пользовательская палитра.

Откройте пункт Выполнить команду, выполните команду Показать "Отрисовка" (Show Rendering) и затем установите значение Эмулировать медиафункцию CSS forced-colors (Emulate CSS media feature forced-colors) в выпадающем меню.

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

# Показ линейки при наведении курсора мыши

Теперь вы можете открыть пункт Выполнить команду и запустить команду Показывать линейки при наведении курсора мыши (Show rulers on hover). Линейки на странице облегчают измерение ширины и высоты элемента.

Ранее линейки на странице можно было включить только с помощью чекбокса Настройки (Settings) > Показывать линейки.

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

# Поддержка значений row-reverse и column-reverse в редакторе флексбоксов

В редактор флексбоксов добавлены две новые кнопки для поддержки значений row-reverse и column-reverse в свойстве flex-direction.

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

# Новые сочетания клавиш для повторения запроса XHR и расширения всех результатов поиска

# Шорткаты для повторения запроса XHR в панели Сеть (Network)

Выберите XHR-запрос во вкладке Сеть (Network) и нажмите R на клавиатуре, чтобы повторить запрос XHR. Ранее вы могли воспроизвести XHR только через контекстное меню (правый клик мыши > Повторить запрос XHR)

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

# Шорткат для расширение всех результатов поиска

На вкладке Поиск (Search) добавлено новое сочетание клавищ, позволяющее разворачивать и сворачивать все результаты поиска. Ранее результаты поиска можно было разворачивать и сворачивать, щелкая только по одному файлу за раз.

Откройте вкладку, нажав последовательно Esc > три точки > Поиск (Search). Введите искомую строку (например, function) и нажмите Enter, чтобы увидеть список с результатами поиска. Переместите фокус на результаты поиска и нажмите следующее сочетания клавиш, чтобы развернуть/свернуть результаты поиска:

• Windows / Linux - Ctrl + Shift + { или }
• MacOS - Cmd + Options + { или }

Перейдите на страницу с сочетаниями клавиш, чтобы получить полную информацию о шорткатах в Chrome DevTools.

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

# Lighthouse 9 во вкладке Lighthouse

Во вкладке Lighthouse теперь запускается Lighthouse 9. Lighthouse теперь перечисляет все элементы, имеющие одинаковый идентификатор.

Неуникальный идентификатор элемента — распространенная проблема доступности. Например, id, на который ссылается атрибут aria-labelledby, используется на [нескольких элементах] (https://web.dev/articles/duplicate-id-aria).

Перейдите на страницу What’s new in Lighthouse 9.0 для получения более подробной информации об обновлении.

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

# Улучшенная вкладка Источники (Sources)

Множество улучшений стабильности в панели Источники за счёт перехода на CodeMirror 6. Вот несколько заметных улучшений:

• Значительно ускорилось открытие больших файлов (например, WASM, JavaScript)
• Больше никакой случайной прокрутки при пошаговом выполнении кода
• Улучшены предложения автозаполнения для редактируемых источников (например, сниппеты, локальное переопределение)

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

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

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

• Правильное отображение графика водопада сетевых запросов. Ранее стили был некорректны. (1275501)
• Выделение кода было неисправно при поиске в документах с очень длинными строками во вкладке Источники (Sources). Теперь это исправлено. (1275496)
• Больше не дублируется вкладка Полезная нагрузка (Payload) в сетевых запросах. (1273972)
• Исправлено отсутствие деталей сдвига макета в разделе Сводка (Summary) во вкладке Производительность (Performance). (1259606)
• Поддержка произвольных символов (например, ,, .) в запросах поиска на вкладке Сеть. (1267196)

# [Эксперимент] Эндпоинты во вкладке Reporting API

Экспериментальная панель Reporting API была представлена в Chrome 96, чтобы помочь вам отслеживать созданные на странице отчеты и их статус.

Секция Endpoints теперь доступна. Она показывает все эндпоинты, настроенные в заголовке Reporting-Endpoints.

Научитесь пользоваться Reporting API для отслеживания проблем безопасности, устаревших вызовов API и т.д.

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

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

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