Опубликовано: 23 сентября 2025 г.
Сегодня мы запускаем публичную предварительную версию нового сервера Chrome DevTools Model Context Protocol (MCP), который позволяет использовать возможности Chrome DevTools для помощников по кодированию на основе ИИ.
Программисты сталкиваются с фундаментальной проблемой: они не видят, что на самом деле делает генерируемый ими код при запуске в браузере. По сути, они программируют с завязанными глазами.
Сервер Chrome DevTools MCP меняет ситуацию. ИИ-помощники по кодированию могут отлаживать веб-страницы прямо в Chrome, используя возможности отладки и аналитику производительности DevTools. Это повышает точность выявления и устранения проблем.
Посмотрите сами, как это работает:
Что такое протокол контекста модели (MCP)?
Протокол контекста модели (MCP) — это стандарт с открытым исходным кодом для подключения больших языковых моделей (LLM) к внешним инструментам и источникам данных. Сервер Chrome DevTools MCP добавляет возможности отладки для вашего ИИ-агента.
Например, сервер 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 .