Что нового в DevTools (Chrome 98)

Джеселин Йин

Функция предварительного просмотра: Полностраничное дерево доступности

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

В панели «Элементы» откройте панель «Доступность» и установите флажок «Включить полностраничное дерево доступности» . Затем перезагрузите инструменты разработчика, и вы увидите новую кнопку «Доступность» в панели «Элементы» .

Вы можете щелкнуть по нему, чтобы переключиться в полноэкранный древовидный режим просмотра доступности . Вы можете развернуть узлы или щелкнуть по ним, чтобы просмотреть подробности в панели «Доступность» .

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

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

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

Дерево доступности на всю страницу

Номер выпуска Chromium: 887173

Более точные изменения доступны на вкладке «Изменения».

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

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

вкладка «Изменения»

Проблемы Chromium: 1238818 , 1268754 , 1086491

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

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

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

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

При желании вы можете настроить время ожидания для всех этапов в параметрах воспроизведения . Разверните параметры воспроизведения и отредактируйте значение времени ожидания .

Настройки тайм-аута для записи пользовательского потока

Номер выпуска Chromium: 1257499

Убедитесь, что ваши страницы кэшируются, используя вкладку «Кэширование» (Назад/Вперед)

Кэширование "назад/вперед" (или bfcache) — это оптимизация браузера, позволяющая мгновенно переходить по ссылкам "назад" и "вперед".

Новая вкладка «Назад/Вперед» в кэше поможет вам проверить страницы, чтобы убедиться в их оптимизации для bfcache, а также выявить любые проблемы, которые могут препятствовать их корректному отображению.

Чтобы проверить конкретную страницу, перейдите на неё в Chrome, затем в инструментах разработчика выберите «Приложение» > «Кэш перемотки вперёд-назад» . Далее нажмите кнопку «Проверить кэш перемотки вперёд-назад» , и инструменты разработчика попытаются перейти на другую страницу и обратно, чтобы определить, можно ли восстановить страницу из кэша перемотки вперёд-назад.

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

Вкладка кэша "Назад/Вперед"

Проблема с Chromium: 1110752

Новый фильтр панели свойств

Если вы хотите сфокусироваться на определенном свойстве в панели «Свойства» , теперь вы можете ввести имя или значение этого свойства в новое текстовое поле «Фильтр» .

По умолчанию свойства, значение которых равно null или undefined не отображаются. Установите флажок «Показать все» , чтобы отобразить все свойства.

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

Фильтр панели свойств

Проблема с Chromium: 1269674

Имитация функции принудительного выбора цветов в CSS для работы с медиафайлами.

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

Откройте командное меню , выполните команду «Показать рендеринг» , а затем установите значение в раскрывающемся списке «Эмулировать функцию мультимедиа CSS: принудительные цвета» .

CSS-функция принудительного выбора цветов для медиафайлов

Проблема Chromium: 1130859

Отображать линейки при наведении курсора

Теперь вы можете открыть меню команд и запустить команду « Показать линейки при наведении курсора» . Линейки страницы упрощают измерение ширины и высоты элемента.

Ранее включить линейки страниц можно было только через флажок « Показать линейки» в разделе «Настройки» .

Отображать линейки при наведении курсора

Проблема Chromium: 1270562

Поддерживается row-reverse и column-reverse в редакторе Flexbox.

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

редактор Flexbox

Номер выпуска Chromium: 1263866

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

Клавиатурные сочетания для воспроизведения XHR-запросов на панели «Сеть».

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

повтор XHR

Проблема с Chromium: 1050021

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

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

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

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

Для получения списка сочетаний клавиш в инструментах разработчика Chrome перейдите в раздел «Сочетания клавиш».

Проблема Chromium: 1255073

Маяк № 9 на панели «Маяк»

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

Неуникальный идентификатор элемента — распространённая проблема доступности. Например, идентификатор, указанный в атрибуте aria-labelledby используется для нескольких элементов .

Подробную информацию об обновлениях вы найдете в разделе « Что нового в Lighthouse 9.0» .

​ Аудит Lighthouse по запросу «Все фокусируемые элементы должны иметь уникальный `id`», показывающий два элемента с одинаковым `id`.

Номер выпуска Chromium: 772558

Улучшенная панель «Источники»

В панели «Источники» внесено множество улучшений, повышающих стабильность работы, после обновления до CodeMirror 6. Вот несколько наиболее заметных улучшений:

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

Номер выпуска Chromium: 1241848

Различные важные моменты

В этом релизе внесены следующие существенные исправления:

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

[Экспериментальные] Конечные точки на панели API отчетов

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

Теперь доступен раздел «Конечные точки» . Он предоставляет обзор всех конечных точек, настроенных в заголовке Reporting-Endpoints .

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

Панель API для создания отчетов

Проблема Chromium: 1200732

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

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

Свяжитесь с командой Chrome DevTools

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

Что нового в инструментах разработчика

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