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

Sofia Emelianova
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. Эти предварительные версии каналов дают доступ к новейшим функциям инструментов разработчика, позволяют тестировать передовые API веб-платформ и помогают находить проблемы на сайте до того, как с ними столкнутся пользователи.

Как связаться с командой инструментов разработчика Chrome

Ниже перечислены способы обсудить новые функции, обновления и другие вопросы, связанные с инструментами разработчика.

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

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