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

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

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

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

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

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

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

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

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

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

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

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

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

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

Список Sources > Event Listener Breakpoints > Control получает два слушателя, связанных с scroll-snap : 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, панель производительности теперь фиксирует события Send WebSocket Message и Receive WebSocket Message и показывает их в трассировке производительности. Например:

Событие «Получение сообщения 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» .