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

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

Google I/O 2025

Chrome DevTools будет активно представлен на конференции Google I/O в этом году. Планируется сочетание прямых трансляций и записей сессий.

Чтобы узнать о новых интересных функциях, присоединяйтесь к следующим трансляциям:

Кроме того, не забудьте присоединиться к веб-сеансу Рэйчел Эндрю «Что нового в сети?» 20 мая 2025 г. в 16:30 по тихоокеанскому времени.

Посмотрите наше последнее видео для краткого обзора наших последних событий:

Измените и сохраните изменения CSS в вашем рабочем пространстве с помощью Gemini

Теперь с помощью нескольких щелчков мыши вы можете поручить Gemini изменить и исправить CSS, а также сохранить изменения в исходных файлах на вашем компьютере с помощью подключенной рабочей папки .

Автоматические рабочие пространства — экспериментальная функция. Вы можете подключить существующую исходную папку или попробовать демо-версию .

При подключенной папке рабочей области на панели «Элементы» нажмите «Спросить ИИ» , попросите Gemini изменить CSS, нажмите « Продолжить» , чтобы протестировать изменения в реальном времени, затем разверните «Несохраненные изменения» , нажмите «Применить к рабочей области» , просмотрите различия и нажмите «Сохранить все» .

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

Теперь вы можете автоматически (или вручную) подключать папку рабочего пространства , чтобы DevTools сохранял изменения JavaScript, HTML и CSS в исходных файлах, хранящихся на вашем компьютере.

Посмотрите, как это работает с JavaScript:

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

Спросите Gemini о показателях эффективности

Теперь одним нажатием кнопки вы можете начать чат с Gemini, чтобы изучить и принять меры по следующим показателям эффективности:

  • LCP по фазе
  • Обнаружение запроса LCP
  • Запросы на блокировку рендеринга
  • Виновники смещения макета
  • Задержка запроса документа

До и после добавления кнопки «Спросить ИИ» к аналитике на панели «Производительность».

Не стесняйтесь оставлять свои отзывы об этой функции на crbug.com/371170842 .

Аннотируйте результаты производительности с помощью Gemini

Теперь вы можете попросить Gemini сгенерировать аннотации к событиям в трассировке производительности.

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

Добавляйте скриншоты в свои чаты с Gemini

На панели помощи ИИ теперь можно нажать кнопку «Сделать снимок экрана» , чтобы сделать снимок экрана страницы и отправить его в чат с Gemini.

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

До и после добавления кнопки «Сделать снимок экрана» на панель «Помощь ИИ».

Новые данные на панели «Производительность»

В этой версии на панели «Производительность» появляются два новых элемента: дублированный JavaScript и устаревший JavaScript .

Дублированный JavaScript

Новый раздел «Производительность > Статистика > Дублированный JavaScript» выделит в сетевом отслеживании запросы на большие дублированные модули JavaScript в ваших пакетах, если они присутствуют на вашей странице.

Информация о «Дублированном JavaScript» на панели «Производительность».

Вы также можете нажать «Просмотреть древовидную карту» в представлении, чтобы изучить зависимости JavaScript.

Устаревший JavaScript

Новый раздел «Производительность > Статистика > Устаревший JavaScript» будет отображать в отслеживании сети запросы устаревшего JavaScript, если они присутствуют на вашей странице, например, полифиллы и преобразования, которые позволяют старым браузерам использовать новые функции JavaScript. Однако многие из них не нужны современным браузерам.

Аналитика «Устаревший JavaScript» на панели «Производительность».

Спекуляции теперь поддерживают теги правил

Приложение > Спекулятивные загрузки теперь отображают теги вместо URL-адресов для наборов правил, если теги присутствуют.

До и после замены URL-адреса набора правил тегом.

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

Маяк 12.6.0

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

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

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

См. также полный список изменений .

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

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

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

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

  • Сеть : Добавлен анализ известных форматов таймингов сервера.
  • Теперь вы можете отменить выбор строк в таблицах с помощью Cmd / Ctrl + щелчок мыши (проблема Chromium: 409474445 ).
  • Производительность > Аналитика > Использовать эффективные сроки жизни кэша теперь игнорирует активы с TTL, равным или превышающим 30 дней.

Доступность

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

  • Производительность : стрелки инициатора на трассе теперь более заметны.
  • Элементы : теперь можно переключать полностраничный вид дерева доступности с помощью сочетания клавиш A (проблема Chromium: 40888478 ).

  • Программы чтения с экрана теперь, среди прочего, произносят:

    • «Копируется в буфер обмена» при копировании из блоков кода.
    • «Применение к рабочему пространству» — применяется к вашему рабочему пространству в чате помощи ИИ .
    • «Создание метки» при запросе ИИ создать ее в меню «Производительность» > «Аннотации» .
    • Обратите внимание, что в чате помощи ИИ есть предлагаемые подсказки.
    • Ознакомьтесь с предполагаемой экономией для получения актуальной информации в разделе «Производительность» > «Аналитика» .

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

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

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

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

Что нового в DevTools

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