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

Published on Updated on

Translated to: English, Español, Português, 한국어, 中文, 日本語

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

Заинтересованы в улучшении DevTools? Зарегистрируйтесь и примите участие в исследовании пользовательского опыта здесь.

Ранний доступ: дерево доступности на всю страницу (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) в выпадающем меню.

CSS-медиафункция 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)

Повторение запроса 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/duplicate-id-aria/).

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

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

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

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

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

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

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

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

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

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

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

Чтобы включить эту экспериментальную функцию поставьте голочку в чекбоксе рядом с пунктом Enable Reporting API panel in the Application panel в Настройки (Settings) > Эксперименты (Experiments).

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

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

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

Панель Reporting API

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

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

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

Связь с командой Chrome DevTools

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

  • Отправьте нам предложение или отзыв через crbug.com.
  • Сообщите о проблеме, связанной с DevTools, используя Больше опций (More options)   More   > Справка (Help) > Сообщить о проблемах в инструментах разработчика (Report a DevTools issues) в DevTools.
  • Твитните на @ChromeDevTools.
  • Оставьте комментарии под What's new in DevTools видео на YouTube.

Больше новинок DevTools

Чтобы увидеть полный список обновлений, перейдите на английскую версию по ссылке What's New In DevTools. Ниже перечислены материалы, переведенные на русский язык.

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.