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

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

Улучшения панели производительности

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

Перемещайте и скрывайте треки с помощью обновленного режима конфигурации треков

Теперь вы можете войти в режим настройки трека, щёлкнув правой кнопкой мыши по названию трека и выбрав «Настроить треки» . Кнопка редактирования, занимавшая много места, была удалена.

До и после замены кнопки редактирования на пункт меню.

Режим конфигурации треков позволяет изменять порядок треков и скрывать их. Нажмите вверх или , чтобы переместить трек, или нажмите кнопку «Скрыть» для отключения . Чтобы выйти из режима конфигурации, нажмите «Завершить настройку треков» внизу. Эта конфигурация сохраняется для новых трассировок, но не для следующих сеансов DevTools.

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

Игнорировать скрипты в диаграмме пламени

В диаграмму Flame в главном треке добавлена поддержка списков игнорирования. Теперь можно щелкнуть правой кнопкой мыши по скрипту на диаграмме и выбрать «Добавить скрипт в список игнорирования» .

Пункт меню для добавления скрипта в список игнорируемых, скрипты, помеченные как игнорируемые, и соответствующие правила в Настройках.

На диаграмме игнорируемые скрипты сворачиваются, помечаются как «В списке игнорирования» и добавляются в пользовательские правила исключения в разделе «Настройки» «Список игнорирования» . Игнорируемые скрипты сохраняются до тех пор, пока вы не удалите их из трассировки или из пользовательских правил исключения .

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

Уменьшить частоту процессора в 20 раз

В меню «Управление производительностью ЦП» в настройках захвата на панели «Производительность» появилась новая опция замедления в 20 раз . Таким образом, теперь вы можете точнее воспроизводить и анализировать реальные проблемы с производительностью, даже на мощных компьютерах.

До и после добавления опции «20x slowdonw» в «Настройки захвата».

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

Панель аналитики производительности будет упразднена

Экспериментальная панель «Аналитика производительности» будет упразднена в 2024 году. Команда DevTools работает над интеграцией её наиболее полезных функций в панель «Производительность» . В верхней части панели «Аналитика производительности» теперь отображается баннер, информирующий о предстоящем прекращении поддержки.

Баннер с предупреждением об устаревании на панели «Аналитика производительности».

Более подробную информацию см. в разделе Инструменты повышения эффективности в 2024 году и далее .

Если у вас есть какие-либо отзывы о том, что работает, что не работает и что, по вашему мнению, можно улучшить, мы хотели бы услышать от вас .

Вставьте целые строки заголовков, чтобы переопределить их

При переопределении заголовков теперь можно вставить всю строку заголовка ( HEADER_NAME : VALUE ), и DevTools разделит строку в точке : на имя заголовка и его значение.

Посмотрите на это в действии в следующем видео.

При редактировании заголовков панель «Сеть» теперь предупреждает, если вы ввели какие-либо символы, отличные от букв, цифр, дефисов и подчеркиваний.

Предупреждение рядом с именем заголовка, содержащим неподдерживаемые символы.

Кроме того, для URL-адресов chrome:// отключены переопределенные параметры меню и кнопки редактирования , что соответствует предполагаемому поведению.

Проблемы с Chromium: 330967147 , 337012362 , 328210785 .

Найдите чрезмерное использование памяти с помощью новых фильтров в снимках кучи

Снимки кучи на панели «Память» получили новые фильтры, которые помогут обнаружить распространенные случаи неэффективного использования памяти, такие как дублирующиеся строки, объекты, удерживаемые отсоединенными узлами DOM и консолью DevTools.

До и после добавления параметров фильтра для распространенных случаев неэффективного использования памяти.

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

Проверьте контейнеры хранения в разделе «Приложение» > «Хранилище».

Теперь вы можете просматривать контейнеры хранилища в специальном дереве в разделе «Приложение» > «Хранилище» . Это дерево, ранее доступное в экспериментальном режиме, теперь включено по умолчанию.

До и после включения дерева контейнеров хранения в разделе «Хранилище».

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

Отключите предупреждения о самостоятельных XSS-атаках с помощью флага командной строки

Если вы автоматизируете использование Chrome или иным образом открываете DevTools из командной строки для отладки, вам часто потребуется отключить предупреждение о XSS , которое появляется в каждом новом сеансе DevTools.

Диалоговое окно предупреждения self-xss в консоли.

Теперь вы можете отключить это диалоговое окно, передав Chrome флаг командной строки --unsafely-disable-devtools-self-xss-warnings .

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

Маяк 12.0.0

Панель Lighthouse теперь работает под управлением Lighthouse 12.0.0.

Это обновление вносит ряд изменений, включая удаление категории PWA, реорганизацию категории SEO, прекращение поддержки общей экономии, новые аудиты и изменения в аудите. Полный список изменений см. здесь.

Чтобы изучить основы использования панели Lighthouse в DevTools, ознакомьтесь с разделом Lighthouse: Оптимизация скорости сайта .

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

Разные моменты

Вот некоторые важные исправления и улучшения в этом выпуске:

  • Производительность :
    • Настройки медленного захвата ( Включить расширенный инструментарий рисования и Включить статистику селектора CSS ) теперь автоматически очищаются в следующем сеансе DevTools.
    • Вкладка «Статистика селектора» теперь не прокручивается автоматически вниз при увеличении масштаба диаграммы пламени и изменении данных ( 337999939 ).
  • Консоль : сочетание клавиш Ctrl + ` теперь закрывает консоль в панели, только если она находится в фокусе ( 40875466 , 328210785 ).
  • Автозаполнение : Исправлен разбор адреса ( 335409093 , 335409707 ).
  • Доступность : Исправлены объявления программы чтения с экрана для локализованных строк ( 324930007 ).

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

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

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

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

Что нового в DevTools

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