Что нового в 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» .

Хром 126

Хром 125

Хром 124

Хром 123

Хром 122

Хром 121

Хром 120

Хром 119

Хром 118

Хром 117

Хром 116

Хром 115

Хром 114

Хром 113

Хром 112

Хром 111

Хром 110

Хром 109

Хром 108

Хром 107

Хром 106

Хром 105

Хром 104

Хром 103

Хром 102

Хром 101

Хром 100

Хром 99

Хром 98

Хром 97

Хром 96

Хром 95

Хром 94

Хром 93

Хром 92

Хром 91

Хром 90

Хром 89

Хром 88

Хром 87

Хром 86

Хром 85

Хром 84

Хром 83

Хром 82

Chrome 82 был отменен .

Хром 81

Хром 80

Хром 79

Хром 78

Хром 77

Хром 76

Хром 75

Хром 74

Хром 73

Хром 72

Хром 71

Хром 70

Хром 68

Хром 67

Хром 66

Хром 65

Хром 64

Хром 63

Хром 62

Хром 61

Хром 60

Хром 59

,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Хром 126

Хром 125

Хром 124

Хром 123

Хром 122

Хром 121

Хром 120

Хром 119

Хром 118

Хром 117

Хром 116

Хром 115

Хром 114

Хром 113

Хром 112

Хром 111

Хром 110

Хром 109

Хром 108

Хром 107

Хром 106

Хром 105

Хром 104

Хром 103

Хром 102

Хром 101

Хром 100

Хром 99

Хром 98

Хром 97

Хром 96

Хром 95

Хром 94

Хром 93

Хром 92

Хром 91

Хром 90

Хром 89

Хром 88

Хром 87

Хром 86

Хром 85

Хром 84

Хром 83

Хром 82

Chrome 82 был отменен .

Хром 81

Хром 80

Хром 79

Хром 78

Хром 77

Хром 76

Хром 75

Хром 74

Хром 73

Хром 72

Хром 71

Хром 70

Хром 68

Хром 67

Хром 66

Хром 65

Хром 64

Хром 63

Хром 62

Хром 61

Хром 60

Хром 59