В Chrome 144 команда разработчиков добавила долгожданную функцию в сервер Chrome DevTools MCP: новую панель условий запроса, а также улучшения для отладки шрифтов и используемых таблиц стилей.
На этом завершается впечатляющий список функций, которые мы выпустили в течение 2025 года. Хотите узнать, не пропустили ли вы что-нибудь из этого? Тогда ознакомьтесь с основными моментами ниже или просмотрите наши предыдущие выпуски «Что нового в DevTools».
Обновления сервера DevTools MCP
Мы внесли ряд исправлений в сервер DevTools MCP и выпустили версию 0.12.1. В этой версии появилась важная новая функция — автоматическое подключение, которая позволяет повторно использовать существующую сессию браузера . Благодаря автоматическому подключению вы можете начать отладку в Chrome, а затем указать DevTools MCP на тот же экземпляр Chrome, чтобы продолжить с того места, где остановились.
Подробнее об автоматическом подключении к DevTools MCP можно узнать в соответствующей статье блога . Полный список изменений и исправлений ошибок смотрите в общедоступном журнале изменений на GitHub .
Индивидуальное ограничение запросов к сети
Панель блокировки сетевых запросов переименована в «Условия запроса» . Помимо блокировки запросов, эта панель теперь также позволяет регулировать скорость обработки отдельных запросов.
Откройте панель в меню ⋮ > Дополнительные инструменты > Условия запроса . Установите флажок «Включить блокировку и регулирование» , чтобы включить блокировку запросов. Нажмите кнопку «+» , чтобы добавить новый текстовый шаблон. Нажмите значок , чтобы отменить все правила.
Узнайте, как регулировать скорость отдельных сетевых запросов, в обновленной документации .
Отредактируйте правила @font-face и @font-feature-values
Значения @font-face и @font-feature-values теперь отображаются на панели «Стили» и могут быть отредактированы оттуда.
Применённые таблицы стилей в панели «Элементы»
В панели «Элементы» теперь отображаются принятые таблицы стилей в теневых и корневых папках документа. Это упрощает поиск таблиц стилей, влияющих на элементы, и отладку стилей для тех, кто работает с созданными таблицами стилей, особенно когда они неожиданно не применяются.
Что нового в DevTools 2025?
инновации в области искусственного интеллекта
Начиная с анализа консоли , инновации в области искусственного интеллекта к настоящему времени стали неотъемлемой частью Chrome DevTools, а панель помощи ИИ является основным центром для контекстно-ориентированной отладки с помощью ИИ. Благодаря подсказкам кода на панелях «Консоль» и «Исходный код», а также автоматическим аннотациям от Gemini в трассировках производительности, DevTools предлагает полный набор инструментов на основе ИИ для оптимизации ваших рабочих процессов.
- Комплексное исправление стилей: попросите Gemini исправить проблемы с CSS и, в сочетании с Workspaces, сохраните эти изменения непосредственно в исходные файлы на диске.
- Задавайте вопросы о производительности: теперь вы можете обсудить полную трассировку производительности с помощью ИИ, углубиться в анализ любых параметров производительности или использовать Gemini для аннотирования трассировки .
- Визуальная отладка: панель помощи ИИ стала многофункциональной, позволяя загружать изображения или делать скриншоты , чтобы помочь Gemini понять и устранить визуальные сбои.
Производительность
Мы переработали панель «Производительность» , чтобы сделать отладку производительности менее сложной и более удобной для принятия решений. Например, записанный трассировочный файл теперь содержит тщательно отобранные данные, которые помогают быстрее выявлять узкие места и быстрее перемещаться по трассировкам. Другие улучшения включают следующее:
- Практические рекомендации: Мы внедрили мощный набор инструментов для анализа производительности , позволяющий выявлять конкретные проблемы, такие как LCP по этапам , факторы, влияющие на смещение макета , и задержка запроса документа .
- Практический контекст: Мы интегрировали данные с мест эксплуатации и данные CrUX непосредственно в панель «Производительность», что позволяет вам проверять результаты лабораторных испытаний на основе реального пользовательского опыта.
- Контекст фреймворка: Angular v20 и React v19.2 теперь используют API расширяемости . Понимание узких мест основного потока становится проще благодаря прямому отображению дерева компонентов. Отдельное спасибо за наше сотрудничество с командами Angular и React!
- Улучшена совместная работа: обмен трассировками стал проще благодаря возможности добавлять к ним аннотации, а также опциям экспорта содержимого ресурсов и карт исходного кода , что гарантирует, что коллега или вы сами в будущем получите весь необходимый контекст.
Веб-платформа
DevTools шла в ногу с развитием веб-платформы, добавляя специализированные инструменты для новейших спецификаций CSS и улучшая пользовательский опыт для уже существующих функций.
Мы добавили углубленную трассировку для сложных цепочек переменных CSS , доступность Baseline для всплывающих подсказок свойств, а также совсем недавно ввели поддержку отладки для сложных анимаций ввода с использованием правила @starting-style и визуального редактора для нового макета display: masonry .
Загрузите предварительные каналы
Рекомендуем использовать Chrome Canary , Dev или Beta в качестве браузера по умолчанию для разработки. Эти предварительные версии предоставляют доступ к новейшим функциям DevTools, позволяют тестировать передовые API веб-платформ и помогают выявлять проблемы на вашем сайте до того, как их обнаружат пользователи!
Свяжитесь с командой Chrome DevTools
Используйте следующие параметры для обсуждения новых функций, обновлений или чего-либо еще, связанного с DevTools.
- Отправляйте нам свои отзывы и предложения по улучшению функционала на сайте crbug.com .
- Сообщить о проблеме в инструментах разработчика можно с помощью параметра Дополнительные параметры > Справка > Сообщить о проблеме в инструментах разработчика .
- Напишите в Твиттере @ChromeDevTools .
- Оставляйте комментарии к видеороликам YouTube «Что нового в инструментах разработчика» или «Советы по инструментам разработчика» на YouTube .