Опубликовано: 23 сентября 2025 г.
Сегодня мы запускаем публичную предварительную версию нового сервера Chrome DevTools Model Context Protocol (MCP) , который расширяет возможности Chrome DevTools для программистов-ассистентов на основе искусственного интеллекта.
Программисты-агенты сталкиваются с фундаментальной проблемой: они не видят, что на самом деле делает сгенерированный ими код при выполнении в браузере. По сути, они программируют с завязанными глазами.
Сервер Chrome DevTools MCP меняет это. Искусственные интеллекты-помощники в программировании могут отлаживать веб-страницы непосредственно в Chrome, используя возможности отладки DevTools и анализируя производительность. Это повышает точность выявления и устранения проблем.
Убедитесь сами, как это работает:
Что такое протокол контекста модели (MCP)?
Протокол контекста модели (MCP) — это стандарт с открытым исходным кодом для подключения больших языковых моделей (LLM) к внешним инструментам и источникам данных. Сервер MCP в Chrome DevTools добавляет возможности отладки вашему агенту ИИ.
Например, сервер Chrome DevTools MCP предоставляет инструмент под названием performance_start_trace . При необходимости исследования производительности вашего веб-сайта, LLM может использовать этот инструмент для запуска Chrome, открытия вашего веб-сайта и записи трассировки производительности с помощью Chrome DevTools. Затем LLM может проанализировать трассировку производительности и предложить потенциальные улучшения. Используя протокол MCP, сервер Chrome DevTools MCP может предоставить вашему агенту разработки новые возможности отладки, чтобы улучшить его работу по созданию веб-сайтов.
Если вы хотите узнать больше о том, как работает MCP, ознакомьтесь с документацией MCP .
Для чего его можно использовать?
Ниже приведены несколько примеров подсказок, которые вы можете попробовать в любом голосовом помощнике на ваш выбор, например, в Gemini CLI.
Проверяйте изменения кода в режиме реального времени.
Создайте исправление с помощью вашего ИИ-агента, а затем автоматически проверьте, работает ли решение должным образом, с помощью Chrome DevTools MCP.
Рекомендуем попробовать:
Verify in the browser that your change works as expected.
Диагностика сетевых и консольных ошибок.
Предоставьте своему агенту возможность анализировать сетевые запросы для выявления проблем CORS или изучать журналы консоли, чтобы понять, почему та или иная функция работает некорректно.
Рекомендуем попробовать:
A few images on localhost:8080 are not loading. What's happening?
Имитация поведения пользователя
Просматривайте интерфейс, заполняйте формы и нажимайте кнопки, чтобы воспроизводить ошибки и тестировать сложные пользовательские сценарии — и все это, одновременно проверяя среду выполнения.
Рекомендуем попробовать:
Why does submitting the form fail after entering an email address?
Отладка проблем с отображением и версткой в реальном времени.
Попросите вашего ИИ-агента подключиться к странице в реальном времени, проверить DOM и CSS и получить конкретные предложения по исправлению сложных проблем с компоновкой, таких как переполнение элементов, на основе данных из браузера в реальном времени.
Рекомендуем попробовать:
The page on localhost:8080 looks strange and off. Check what's happening there.
Автоматизация аудита производительности
Дайте своему ИИ-агенту указание выполнить трассировку производительности, проанализировать результаты и исследовать конкретные проблемы с производительностью, такие как высокие значения LCP.
Рекомендуем попробовать:
Localhost:8080 is loading slowly. Make it load faster.
Список всех доступных инструментов вы найдете в нашей справочной документации .
Начать
Чтобы это проверить, добавьте следующую запись в конфигурацию вашего клиента MCP:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["chrome-devtools-mcp@latest"]
}
}
}
Чтобы проверить работоспособность, запустите следующую команду в вашем агенте кодирования:
Please check the LCP of web.dev.
Для получения более подробной информации ознакомьтесь с документацией Chrome DevTools MCP на GitHub.
Примите участие!
Мы разрабатываем Chrome DevTools MCP поэтапно, начиная с публичной предварительной версии, которую выпускаем сегодня. Мы активно ищем отзывы от вас и сообщества о том, какие возможности следует добавить в будущем. Независимо от того, являетесь ли вы разработчиком, использующим помощников по программированию на основе ИИ, или поставщиком, создающим инструменты разработки ИИ следующего поколения, ваши идеи будут бесценны, и если чего-то не хватает или что-то не работает, пожалуйста, сообщите об этом, создав проблему на GitHub .