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

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

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

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

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

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

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

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

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

Игнорировать сценарии в таблице пламени

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Диалоговое окно предупреждения о самостоятельном xss в консоли.

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

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

Маяк 12.0.0

На панели «Маяк» теперь работает 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» .