
Chrome DevTools MCP
Даёт агенту живой Chrome с инструментами DevTools: записать трассировку производительности, разобрать сетевые запросы и консоль, прогнать Lighthouse, снять дамп памяти.
Как подключить
Что сделать до подключения
Node.js LTS и npm
Google Chrome текущей стабильной версии или новее
Конфиг для вашего клиента
Команда в терминале, в папке проекта. Флаг --scope user подключит сервер для всех проектов. Подробно о Claude Code
claude mcp add --transport stdio chrome-devtools \
-- npx -y chrome-devtools-mcp@latestПроверка: claude mcp list показывает статус рядом с каждым сервером: ✔ Connected, ! Needs authentication или ✘ Failed to connect. Внутри сессии то же видно по команде /mcp.
Файл ~/.codex/config.toml или .codex/config.toml в доверенном проекте. Можно и командой codex mcp add. Подробно о Codex
[mcp_servers.chrome-devtools]
command = "npx"
args = ["-y", "chrome-devtools-mcp@latest"]Проверка: В интерфейсе codex введите /mcp: появится список активных серверов. Из терминала то же покажет codex mcp list.
Файл ~/.cursor/mcp.json для всех проектов или .cursor/mcp.json в папке проекта. Подробно о Cursor
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}Проверка: Откройте Customize в боковой панели: там список серверов с переключателями. Ошибки подключения смотрите в панели Output (Cmd+Shift+U), пункт MCP Logs в выпадающем списке.
Файл .mcp.json в корне проекта или ~/.copilot/mcp-config.json для всех проектов. Подробно о VS Code
{
"mcpServers": {
"chrome-devtools": {
"type": "stdio",
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}Проверка: Попросите Copilot выполнить безобидную задачу через сервер и раскройте вызов инструмента в чате. Одна запись в конфиге подключение не подтверждает.
Файл ~/.qwen/settings.json или .qwen/settings.json в проекте. Подробно о Qwen Code
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}Проверка: Запустите qwen и введите /mcp: откроется окно управления серверами. Из терминала статус покажет qwen mcp list.
Файл ~/.gemini/settings.json или .gemini/settings.json в проекте. Подробно о Gemini CLI
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}Проверка: gemini mcp list показывает каждый сервер, его настройки и статус Connected или Disconnected. В сессии /mcp выводит CONNECTED, CONNECTING или DISCONNECTED и список инструментов.
Файл opencode.json в папке проекта или ~/.config/opencode/opencode.json. Подробно о OpenCode
{
"$schema": "https://opencode.ai/config.json",
"mcp": {
"servers": {
"chrome-devtools": {
"type": "local",
"command": ["npx", "-y", "chrome-devtools-mcp@latest"]
}
}
}
}Проверка: opencode mcp list показывает состояние каждого сервера, подключённый выглядит как ✓ context7 connected. Внутри OpenCode то же видно в /mcps.
Настройки → Разработчик → Изменить конфиг: файл claude_desktop_config.json. После правки перезапустите приложение. Подробно о Claude Desktop
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}Проверка: Нажмите «Add files, connectors, and more /» в левом нижнем углу поля ввода, наведите на Connectors и откройте Manage connectors. Выберите сервер, чтобы увидеть его инструменты.
Вкладка Program → Install → Edit mcp.json. Подробно о LM Studio
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}Проверка: Попросите модель в чате выполнить задачу через инструмент сервера. Через API сервер из mcp.json вызывают по id в integrations, например mcp/playwright.
Инструменты сервера
navigate_pageоткрывает адресnew_pageоткрывает новую вкладкуtake_snapshotснимает текстовую структуру страницыclickкликает по элементуfill_formзаполняет формуtype_textвводит текстwait_forждёт появления текстаtake_screenshotделает скриншотlist_console_messagesчитает консольlist_network_requestsпоказывает сетевые запросыget_network_requestчитает один запросevaluate_scriptвыполняет JavaScript на страницеget_css_stylesпоказывает стили элементаperformance_start_traceзапускает трассировку производительностиperformance_stop_traceостанавливает трассировкуperformance_analyze_insightразбирает найденную проблемуlighthouse_auditпрогоняет аудит Lighthouseemulateэмулирует устройство и условияresize_pageменяет размер окнаtake_heapsnapshotснимает дамп памятиПоказано 20 из 63.
Что попросить агента
Для каких задач
Ограничения
Клиент MCP видит и может менять всё в браузере, включая открытые сессии; личные аккаунты в этом профиле лучше не держать
Поддерживаются Google Chrome и Chrome for Testing; другие браузеры на Chromium могут работать с ошибками
Google по умолчанию собирает статистику использования, а инструменты производительности отправляют адреса трассировок в CrUX API; отключается флагами --no-usage-statistics и --no-performance-crux
Подмена запросов, расширения, PWA и WebAuthn по умолчанию выключены и включаются отдельными флагами --category-…