DevTool MCP — MCP-сервер для Claude Code: процессы и отладка фронтенда
Связывает агента с запущенным приложением: поднимает дев-сервер, ставит обратный прокси и собирает ошибки фронтенда. Полезен, когда агент правит UI вслепую.
claude mcp add devtool-mcp -- npx -y @standardbeagle/devtool-mcpЧто делает DevTool MCP
DevTool MCP управляет процессами разработки и прокси, а ещё снимает диагностику фронтенда. Вместо того чтобы описывать агенту в чате, что сломалось на странице, вы отдаёте ему данные с работающего приложения: ошибки в консоли, сетевые запросы, состояние вёрстки.
Ставится он как обычный MCP-сервер и работает через npx. Для Claude хватит одной команды, для Cursor и GitHub Copilot придётся добавить запись в конфиг MCP: команда npx, аргументы -y и @standardbeagle/devtool-mcp. Ничего компилировать не нужно.
Без Node.js и npx в PATH сервер не запустится, потому что пакет тянется через них. Это стоит проверить до подключения к редактору.
Какие задачи решает
- поднять дев-сервер и прокси одной командой агента
- поймать ошибки JavaScript на живой странице
- посмотреть сетевые запросы без ручного копирования из DevTools
- проверить вёрстку на устройстве через туннель
- отдать агенту структурированные данные вместо текстового описания
Примеры запросов агенту
- Запусти дев-сервер для проекта и покажи ошибки в консоли браузера
- Сними скриншот страницы и найди, почему кнопка уезжает за край
- Проверь сетевые запросы на странице оформления заказа
Как установить DevTool MCP
Командой платформы
claude mcp add devtool-mcp -- npx -y @standardbeagle/devtool-mcpКомандой платформы
codex mcp add devtool-mcp -- npx -y @standardbeagle/devtool-mcpФайл настроек
{
"mcpServers": {
"devtool-mcp": {
"command": "npx",
"args": [
"-y",
"@standardbeagle/devtool-mcp"
]
}
}
}Файл настроек
{
"servers": {
"devtool-mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@standardbeagle/devtool-mcp"
]
}
}
}Командой платформы
gemini mcp add devtool-mcp npx -y @standardbeagle/devtool-mcpПо шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о DevTool MCP
Как установить DevTool MCP в Claude Code?
Одной командой: claude mcp add devtool-mcp -- npx -y @standardbeagle/devtool-mcp. После этого сервер появится в конфигурации MCP вашего Claude.
Что делает DevTool MCP?
Управляет процессами разработки, поднимает обратный прокси и собирает диагностику фронтенда, чтобы агент видел ошибки и сетевую активность на запущенном приложении.
Что нужно для работы сервера?
Node.js с npx в PATH. Пакет запускается через npx без отдельной сборки.
