Что нового в 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, нажмите « Продолжить» , чтобы протестировать изменения в реальном времени, затем разверните «Несохраненные изменения» , нажмите «Применить к рабочей области» , просмотрите различия и нажмите «Сохранить все» .

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

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

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

Проблема Chromium: 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-адреса набора правил на тег.

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

Маяк 12.6.0

В панели управления Lighthouse теперь используется Lighthouse 12.6.0.

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

Фотографии «до» и «после» добавления возможности переключения в режим аналитики в отчете Lighthouse.

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

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

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

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

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

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

Доступность

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

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

  • Программы чтения с экрана теперь, помимо прочего, объявляют:

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

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

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

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

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

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

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