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

Jecelyn Yeen

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

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

На панели Elements откройте панель Accessibility и установите флажок Enable full-page accessibility tree . Затем перезагрузите DevTools, и вы увидите новую кнопку Accessibility на панели Elements .

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

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

Ранее дерево доступности было доступно в панели Доступность . Вид ограничен, он позволяет исследовать только один узел и его предков.

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

Проблема с хромом: 887173

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

Изменения кода на вкладке «Изменения» автоматически отображаются в наглядном виде.

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

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

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

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

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

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

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

Проблема с хромом: 1257499

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

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

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

Чтобы протестировать определенную страницу, перейдите на нее в Chrome, а затем в DevTools перейдите в Application > Back-forward Cache . Затем нажмите кнопку Test back/forward cache , и DevTools попытается перейти назад и назад, чтобы определить, можно ли восстановить страницу из bfcache.

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

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

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

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

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

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

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

Эмулировать медиа-функцию CSS с принудительным выбором цветов

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

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

Проблема с хромом: 1130859

Показывать линейки при наведении курсора

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

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

Проблема с хромом: 1270562

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

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

Проблема с хромом: 1263866

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

Сочетания клавиш для воспроизведения XHR на панели «Сеть»

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

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

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

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

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

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

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

Проблема с хромом: 1255073

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

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

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

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

​

Проблема с хромом: 772558

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

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

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

Проблема с хромом: 1241848

Разные моменты

Вот некоторые важные исправления в этом выпуске:

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

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

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

Раздел Endpoints теперь доступен. Он дает вам обзор всех конечных точек, настроенных в заголовке Reporting-Endpoints .

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

Проблема с хромом: 1200732

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

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

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

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

• Отправляйте нам отзывы и запросы на новые функции на crbug.com .
• Сообщить о проблеме DevTools можно с помощью функции more_vert Дополнительные параметры > Справка > Сообщить о проблеме DevTools в DevTools.
• Твитните @ChromeDevTools .
• Оставляйте комментарии к видео «Что нового в DevTools» на YouTube или к видео «Советы по DevTools» на YouTube .

Что нового в DevTools

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