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

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

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

До и после связывания явных и неявных якорей.

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

До и после привязки popovertarget к его элементу popover.

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

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

Улучшенная функция «Никогда не останавливайтесь здесь»

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

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

Посмотрите рабочий процесс в действии:

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

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

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

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

Проблема с хромом: 40286359 .

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

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

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

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

До и после обновления настроек регулирования сети.

Проблема с хромом: 342406608 .

Информация о сервисном работнике в настраиваемых полях формата HAR.

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

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

Проблема с хромом: 342406608 .

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

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

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

Проблема с хромом: 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.

Что нового в DevTools

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