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

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

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

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

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

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

Фотографии «до» и «после» замены кнопки редактирования пунктом меню.

Режим настройки дорожек позволяет изменять порядок дорожек и скрывать их. Щелкните вверх (вверх) или вниз (вниз), чтобы переместить дорожку, или щелкните кнопку скрыть". Чтобы выйти из режима настройки, нажмите кнопку " Завершить настройку дорожек" внизу. Эта настройка сохраняется для новых трассировок, но не для следующих сеансов DevTools.

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

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

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

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

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

Проблема Chromium: 336266714 .

Снизить производительность процессора в 20 раз.

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

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

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

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

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

Предупреждающий баннер об устаревании в панели «Аналитика производительности».

Для получения более подробной информации см. раздел «Инструменты повышения производительности в 2024 году и далее» .

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

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

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

Посмотрите, как это работает на практике, в следующем видео.

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

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

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

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

Обнаружение чрезмерного использования памяти с помощью новых фильтров в снимках кучи.

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

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

Проблема Chromium: 337094903 .

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

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

Сравнение состояния дерева сегментов хранения до и после включения этой функции в разделе «Хранилище».

Проблема Chromium: 338094915 .

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

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

Предупреждение о самоатаке XSS в консоли.

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

Номер выпуска Chromium: 41491762 .

Маяк 12.0.0

В настоящее время панель управления Lighthouse работает под управлением Lighthouse 12.0.0.

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

Чтобы узнать основы использования панели Lighthouse в инструментах разработчика, см. статью «Lighthouse: оптимизация скорости веб-сайта» .

Номер выпуска Chromium: 772558 .

Различные важные моменты

В этом релизе внесены следующие существенные исправления и улучшения:

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

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

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

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

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

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

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