Опубликовано: 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 .