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

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

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

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

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

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

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

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

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

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

  • Исключения или отклонения обещаний из встроенных функций.
  • «Отмена» точек останова 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» и отображает их в трассировке производительности. Например:

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

Что нового в DevTools

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