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

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

Google I/O 2025 выпуск

Chrome DevTools будет иметь сильное присутствие на Google I/O в этом году. Будет смесь живых сессий и записанных сессий.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Дважды щелкните событие в Main track, затем щелкните Generate label рядом с полем ввода. Gemini может предложить метку на основе трассировки стека и контекста.

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

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

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

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

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

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

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

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

Аналитика «Дублированный JavaScript» на панели «Производительность».

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

Устаревший JavaScript

Новый Performance > Insights > Legacy JavaScript будет выделять в Network track запросы на устаревший JavaScript, если он присутствует на вашей странице, например, полифиллы и преобразования, которые позволяют старым браузерам использовать новые функции JavaScript. Однако многие из них не нужны для современных браузеров.

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

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

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

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

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

Маяк 12.6.0

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

В этой версии Lighthouse, в частности, переходит к аудитам производительности Insight . В категории Performance отчета Lighthouse теперь можно Try Insights .

До и после добавления возможности переключения на аналитику в отчете 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» .