Что нового в DevTools, Chrome 127

София Емельянова
Sofia Emelianova
GitHub

Для упрощения отладки функции позиционирования привязок , на вкладке «Стили» теперь есть ссылки на явные и неявные идентификаторы привязок, а также на соответствующие узлы.

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

Кроме того, значение атрибута popovertarget теперь ссылается на соответствующий элемент popover в DOM.

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

Улучшения панели источников

В этой версии внесены несколько улучшений в панель «Источники» .

Улучшенная версия "Никогда не делайте здесь паузу"

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

  • Исключения или отклонения обещаний от встроенных функций.
  • Отмена точек останова для DOM, fetch/XHR и нарушений CSP.
  • В дизассемблировании Wasm.

Посмотрите, как работает этот рабочий процесс:

Проблема с Chromium: 40924349 .

Новые обработчики событий привязки прокрутки

В разделе « Источники > Точки останова обработчиков событий > Управление» отображаются два обработчика событий, связанных с привязкой к прокрутке : scrollsnapchange и scrollsnapchanging . Эти события срабатывают при прокрутке контейнера прокрутки таким образом, чтобы он привязывался к новому элементу.

До и после добавления обработчиков событий, связанных с привязкой к прокрутке.

Проблема Chromium: 40286359 .

Улучшения сетевой панели

В этой версии внесены несколько улучшений в панель «Сеть» .

Обновлены настройки регулирования сети.

В панели «Сеть» обновлены предустановки регулирования скорости: новая «Быстрая 4G» , «Быстрая 3G» переименована в «Медленная 4G» , а «Медленная 3G» переименована в «3G» . Это лучше соответствует предустановкам Lighthouse .

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

Проблема Chromium: 342406608 .

Информация о сотруднике службы поддержки в пользовательских полях формата HAR

При экспорте сетевого журнала в формат HAR теперь можно просматривать информацию, относящуюся к сервисным работникам, включая временные параметры, в виде пользовательских полей (с префиксом в виде подчеркиваний). Например, в журнале могут появиться следующие новые поля:

...
"response": {
  ...
  "_fetchedViaServiceWorker": true,
  "_responseCacheStorageCacheName": "V1",
  "_serviceWorkerResponseSource": "cache-storage"
}
...
"timings": {
  ...
  "_workerStart": -1,
  "_workerReady": -1,
  "_workerFetchStart": -1,
  "_workerRespondWithSettled": -1
}
...

Проблема Chromium: 342406608 .

Отправляйте и получайте события WebSocket на панели «Производительность».

Аналогично другим событиям WebSocket, панель «Производительность» теперь фиксирует события отправки и получения сообщений WebSocket и отображает их в трассировке производительности. Например:

Событие «Получение сообщения WebSocket» зафиксировано в трассировке производительности.

Проблема Chromium: 40286129 .

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

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

  • Доступность : Теперь программы чтения с экрана озвучивают содержимое сообщений в консоли при прокрутке журнала с помощью клавиш со стрелками вверх и вниз ( 344484979 ).
  • Источники :
    • Страница : Теперь пункт меню « Сохранить как» сохраняет файлы модулей Wasm как действительные двоичные файлы Wasm, а не как текст Base64 ( 40784130 ).
    • Стек вызовов : Удален суффикс (async) из описаний кадров асинхронных вызовов, их выделение изменено с курсива на жирный ( 343750870 ).
  • Память : Удалены ненужные InternalNodes нулевого размера из сводки снимков кучи ( 340200025 ).
  • Сеть : Исправлена ​​ошибка, которая препятствовала предварительному просмотру содержимого потокового ответа для запросов, которые только начались, но еще не получили событие responseReceived ( 338340752 ).
  • Производительность :
    • Статистика селектора : Добавлена ​​пояснительная всплывающая подсказка для столбца %-of-Slow-Path-Non-Matches ( 324282954 ).
    • Режим настройки треков : Кнопка «Завершить настройку треков» перемещена в правый нижний угол ( 345256274 ).
  • Консоль : Исправлена ​​ошибка, из-за которой при навигации с использованием кэша «назад/вперед» отображалось несколько одинаковых сообщений в консоли ( 40894153 ).
  • Настройки : Добавлены вспомогательные значки рядом со всеми вкладками.

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

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

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

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

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

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