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

Jecelyn Yeen

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

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

На панели «Элементы» откройте раздел «Специальные возможности» и установите флажок «Включить дерево специальных возможностей на всей странице ». Затем перезагрузите DevTools, и на панели «Элементы» появится новая кнопка специальных возможностей.

Щёлкнув по нему, вы переключитесь на полноэкранное представление дерева доступности . Вы можете развернуть узлы или щёлкнуть по ним, чтобы просмотреть подробную информацию на панели «Специальные возможности» .

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

Раньше дерево доступности было доступно на панели «Специальные возможности» . Его вид ограничен: можно просматривать только один узел и его предков.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Чтобы протестировать конкретную страницу, перейдите на неё в Chrome, а затем в DevTools выберите «Приложение» > «Кэш возврата/пересылки» . Затем нажмите кнопку «Проверить кэш возврата/пересылки» , и 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 > меню с тремя точками > Поиск . Введите строку поиска (например, функцию) и нажмите 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, чтобы помочь вам отслеживать отчеты, созданные на вашей странице, и их статус.

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

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

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

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

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

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

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

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

Что нового в DevTools

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