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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Например, на этой демонстрационной странице я записал процесс загрузки и нажатия пункта меню. Однако загрузка пунктов меню происходит медленно (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 9. Теперь в Lighthouse будут перечислены все элементы с одним и тем же идентификатором.

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

Чтобы получить более подробную информацию об обновлениях, ознакомьтесь с разделом «Что нового в Lighthouse 9.0» .

​

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

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

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

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

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

Разное

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

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

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

Экспериментальная панель Reporting 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» .