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

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

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

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

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

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

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

Режим конфигурации треков позволяет изменять порядок треков и скрывать их. Щелкните вверх или вниз, чтобы переместить трек, или щелкните скрыть. Чтобы выйти из режима конфигурации, щелкните Finish configuring tracks внизу. Эта конфигурация сохраняется для новых трассировок, но не для следующих сеансов DevTools.

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

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

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

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

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

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

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

Меню регулировки ЦП в настройках Capture на панели Performance получает новую опцию замедления в 20 раз . Таким образом, теперь вы можете точнее воспроизводить и анализировать реальные проблемы производительности, даже на мощных компьютерах.

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

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

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

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

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

Чтобы узнать больше, ознакомьтесь с разделом Инструменты повышения производительности в 2024 году и далее .

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

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

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

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

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

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

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

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

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

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

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

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

Проверьте контейнеры хранения в приложении > Хранилище

Теперь вы можете проверять контейнеры хранения в специальном дереве в разделе Application > Storage . Это дерево, ранее экспериментальное, включено по умолчанию.

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

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