chrome-debugger-mcp

English | 中文

English

MCP-сервер для отладки Chrome на основе точек останова.

chrome-debugger-mcp предоставляет примитивы Chrome DevTools Protocol в виде MCP-инструментов, чтобы AI-агент мог подключиться к реальной вкладке Chrome, приостановить выполнение, просмотреть значения в областях видимости, выполнить выражения внутри текущего кадра вызова и пройтись по коду по шагам, опираясь на фактические данные времени выполнения, а не на догадки по статическому исходному коду.

Это не универсальный сервер автоматизации браузера. Основной фокус — отладка во время выполнения.

Основные возможности

• Подключение к реальной вкладке Chrome через CDP после явного подтверждения пользователем

• Приостановка на точках останова или операторах debugger; и ожидание именно той паузы, которую вы ожидаете

• Чтение значений локальной, замыкающей и модульной областей видимости из приостановленного кадра

• Выполнение JavaScript в текущем кадре вызова и продвижение выполнения по шагам

• Чистое возобновление работы, чтобы агент мог продолжать с фактическими значениями времени выполнения

Демонстрация

Демонстрация: агент запускает Chrome, ожидает точку останова, проверяет реальные переменные области видимости и возобновляет работу с фактами времени выполнения, а не с догадками.

Конфигурация MCP-клиента

Использование опубликованного пакета

{
  "mcpServers": {
    "chrome-debugger": {
      "command": "npx",
      "args": ["-y", "chrome-debugger-mcp"]
    }
  }
}

Установка

Из npm

npx -y chrome-debugger-mcp

Или установите глобально:

npm install -g chrome-debugger-mcp

Из исходного кода

pnpm install
pnpm build
node dist/index.js

Другие особенности

• Запуск выделенного экземпляра Chrome с включенной удалённой отладкой

• Установка и удаление точек останова DevTools без редактирования исходного кода

• Перезагрузка страницы через CDP, чтобы точки останова надёжно привязывались после навигации

• Опрос состояния отладчика, когда у MCP-клиента короткие тайм-ауты запросов

• Выдача _ui-полезных данных и сообщений журнала, которые клиенты могут показывать пользователю

Почему это полезно

Многие MCP-инструменты, ориентированные на браузер, сильны в работе с DOM и проверке сети, но слабы в отладке времени выполнения. Этот сервер даёт MCP-клиенту недостающий цикл, который вы обычно используете в Chrome DevTools: подключиться к нужной вкладке, приостановиться в нужный момент, проверить реальные значения, при необходимости пройтись по шагам и чисто возобновить работу.

Он также добавляет ограничения, предотвращающие типичные ошибки агента:

• угадывание, к какой вкладке подключаться;

• вывод о поведении без проверки значений времени выполнения;

• завершение хода между reloadPage() и waitForSpecificPause().

Требования

• Локально установленный Google Chrome

• MCP-клиент, поддерживающий серверы stdio и вызов инструментов

• Доступ к приложению, которое вы хотите отлаживать

• Локальный доступ к исходному коду, если вы планируете вставлять временные операторы debugger;

Модель инструментов

Сервер работает через stdio и предоставляет MCP-инструменты. Наиболее важные инструменты:

• startDebuggingSession: возвращает рекомендуемый порядок отладки и критические правила поведения агента

• launchChrome: запускает выделенный экземпляр Chrome с включенной удалённой отладкой

• listTargets: перечисляет доступные вкладки Chrome и требует, чтобы пользователь выбрал одну

• connect: подключается к подтверждённой вкладке

• setBreakpoint: создаёт точку останова CDP без изменения исходных файлов

• removeBreakpoint: удаляет точку останова, созданную setBreakpoint

• reloadPage: перезагружает текущую страницу через CDP

• waitForSpecificPause: ожидает следующую паузу и проверяет, совпадает ли она с целевым файлом и строкой

• waitForPause: ожидает любую паузу без сопоставления с местоположением

• getScopeVariables: считывает значения локальной, замыкающей и модульной областей видимости из приостановленного кадра

• evaluate: выполняет JavaScript в приостановленном кадре вызова

• stepInto, stepOver, stepOut: стандартное управление выполнением

• resume: возобновляет выполнение после проверки

• getStatus: неблокирующий опрос состояния подключения или паузы

• forcePause: запрашивает паузу на следующем операторе JavaScript

Рекомендуемый порядок действий

Для AI-клиентов предусмотрен следующий порядок:

1. Вызовите startDebuggingSession().

2. Вызовите launchChrome() или используйте уже запущенный экземпляр Chrome с портом CDP.

3. Вызовите listTargets() и покажите пользователю полный список вкладок.

4. Дождитесь, пока пользователь подтвердит точный URL страницы.

5. Вызовите connect({ targetUrl }).

6. Вставьте временный оператор debugger; в локальный исходный код или вызовите setBreakpoint().

7. Вызовите reloadPage().

8. Сразу же вызовите waitForSpecificPause() в том же ходе.

9. Вызовите getScopeVariables() и evaluate(), чтобы проверить значения времени выполнения.

10. При необходимости пройдите по шагам с помощью stepInto(), stepOver() или stepOut().

11. Вызовите resume().

12. Удалите временные операторы debugger; из исходного кода.

Важные правила для авторов агентов

Этот сервер предназначен для агентов, использующих инструменты, а не только для людей. Если вы интегрируете его в MCP-клиент, соблюдайте эти правила:

• Никогда не пропускайте listTargets().

• Никогда не угадывайте целевой URL, даже если открыта только одна вкладка.

• Всегда ждите явного подтверждения пользователя перед connect().

• После reloadPage() немедленно вызывайте waitForSpecificPause() или waitForPause() в том же ходе.

• Не объясняйте поведение по статическому коду, когда значения времени выполнения можно проверить напрямую.

• Всегда вызывайте resume() после проверки.

• Если вы добавили временные операторы debugger; в исходный код, удалите их перед завершением.

Как waitForSpecificPause выполняет сопоставление

waitForSpecificPause — предпочтительный примитив ожидания, поскольку он надёжнее, чем ожидание произвольной паузы.

Он сопоставляет паузу с помощью двух стратегий:

1. Фрагмент URL плюс допуск по номеру строки

2. Фрагмент URL плюс причина паузы debugger-statement

Второй путь важен, когда карты исходного кода, транспиляция или сборка смещают скомпилированные номера строк относительно номеров строк редактора.

Пример последовательности инструментов

Агент, отлаживающий локальное приложение Vite, может сделать примерно следующее:

1. launchChrome({ dryRun: true })

2. launchChrome()

3. listTargets()

4. Ожидание подтверждения пользователем http://127.0.0.1:5173

5. connect({ targetUrl: "127.0.0.1:5173" })

6. Вставка debugger; в App.jsx

7. reloadPage()

8. waitForSpecificPause({ urlFragment: "App.jsx", line: 62, actionHint: "click the Refetch payloads button" })

9. getScopeVariables()

10. evaluate({ expression: "payload.modules" })

11. resume()

Поведение при запуске Chrome

launchChrome() использует выделенный профиль, поэтому не мешает обычной сессии браузера пользователя.

Значения по умолчанию:

• порт удалённой отладки: 9222

• каталог профиля: ~/.chrome-debug-profile

Ожидаемые пути к исполняемому файлу Chrome:

• macOS: /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

• Linux: google-chrome

• Windows: C:\Program Files\Google\Chrome\Application\chrome.exe

Если автоматический запуск не удался, инструмент возвращает команду, которую пользователь может выполнить вручную.

Локальная площадка

В этом репозитории есть одноразовое тестовое приложение в test/, чтобы вы могли проверить сервер отладчика в реалистичном сценарии работы с браузером.

Запуск имитационного сервиса

cd test/service
node src/server.js

Сервис слушает http://127.0.0.1:3030.

Запуск веб-приложения

cd test/web
pnpm install
pnpm dev

Веб-приложение работает на http://127.0.0.1:5173.

Полезные места для паузы:

• test/web/src/App.jsx внутри loadWorkbench

• test/web/src/App.jsx внутри loadModuleDetail

• test/web/src/App.jsx вокруг незавершённых разделов с деталями

Области полезных данных времени выполнения, которые стоит проверить:

• summaryCards

• modules

• apiContracts

• nextActions

• responseShape

Устранение неполадок

Не найдены цели

Убедитесь, что Chrome запущен с --remote-debugging-port=9222 и целевая страница открыта.

targetUrl совпадает с несколькими вкладками

Передайте более специфичную подстроку, чтобы совпадение стало уникальным.

waitForPause или waitForSpecificPause истёк по времени

Это может произойти, когда:

• действие на странице так и не было выполнено;

• была установлена не та точка останова;

• у самого MCP-клиента тайм-аут запроса короче, чем вызов инструмента.

Если ваш клиент быстро завершается по тайм-ауту, используйте getStatus() для опроса или увеличьте тайм-аут клиента.

Номер строки паузы не совпадает с номером строки в редакторе

Сборщики и транспиляторы могут смещать скомпилированные номера строк. Используйте waitForSpecificPause() и полагайтесь на сопоставление по фрагменту URL плюс семантику debugger-statement.

Chrome не запускается автоматически

На машине может использоваться нестандартный путь установки Chrome. Выполните возвращённую команду запуска вручную или адаптируйте реализацию под ваше окружение.

Разработка

pnpm install
pnpm build
node dist/index.js

Реализация находится в:

• src/index.ts: определения MCP-инструментов и подсказки рабочего процесса для пользователя

• src/chrome-manager.ts: интеграция с Chrome DevTools Protocol и управление состоянием отладчика

Лицензия

MIT

Related MCP server: Chrome DevTools MCP

中文

一个面向 Chrome 断点调试的 MCP Server。

chrome-debugger-mcp 把 Chrome DevTools Protocol 的核心调试能力暴露为 MCP 工具，让 AI agent 可以连接真实的 Chrome 标签页，在运行时暂停执行、读取作用域变量、在当前调用帧中执行表达式、单步跟踪代码，并基于真实值继续任务，而不是只靠静态源码猜测行为。

它不是通用浏览器自动化工具。它的重点是运行时调试。

核心能力

• 在用户明确确认后，通过 CDP 连接真实的 Chrome 标签页

• 在断点或 debugger; 命中时暂停，并等待指定文件和行附近的 pause

• 读取当前暂停帧中的 local、closure、module 作用域变量

• 在当前调用帧里执行 JavaScript，并继续单步跟踪

• 检查完成后恢复执行，让 agent 基于真实运行时值继续工作

功能演示

演示流程：agent 拉起 Chrome，等待断点命中，读取真实作用域变量，再基于运行时事实继续执行，而不是靠猜测推进。

MCP 客户端配置

使用已发布包

{
  "mcpServers": {
    "chrome-debugger": {
      "command": "npx",
      "args": ["-y", "chrome-debugger-mcp"]
    }
  }
}

安装方式

从 npm 使用

npx -y chrome-debugger-mcp

也可以全局安装：

npm install -g chrome-debugger-mcp

从源码运行

pnpm install
pnpm build
node dist/index.js

其他特点

• 启动带远程调试端口的独立 Chrome 实例

• 无需修改源码即可设置和移除断点

• 通过 CDP 重载页面，确保跳转后断点可靠绑定

• 当 MCP 客户端请求超时较短时，可轮询调试器状态

• 输出 _ui 结果和 logging 消息，方便客户端展示给用户

为什么适合这个场景

很多浏览器方向的 MCP 工具更擅长 DOM 操作和网络请求观察，但不擅长回答运行时调试问题。这个服务补上的是 Chrome DevTools 里最关键的那条链路：连接正确标签页、在正确时机暂停、读取真实值、必要时单步跟踪、最后恢复执行。

它也内置了几条 guardrails，避免 agent 出现这些常见错误：

• 猜测应该连接哪个标签页

• 没看运行时值就直接下结论

• 在 reloadPage() 和 waitForSpecificPause() 之间错误地结束当前轮次

运行要求

• 本机安装了 Google Chrome

• 使用支持 stdio MCP server 和工具调用的 MCP 客户端

• 可以访问你要调试的应用

• 如果要插入临时 debugger;，需要能访问本地源码

工具模型

这个服务通过 stdio 运行，并暴露一组 MCP tools。最核心的工具有：

• startDebuggingSession：返回推荐调试流程和 agent 行为约束

• launchChrome：启动带远程调试能力的独立 Chrome 实例

• listTargets：列出可调试标签页，并要求用户做选择

• connect：连接到已确认的目标标签页

• setBreakpoint：在不改源码的情况下通过 CDP 设置断点

• removeBreakpoint：移除通过 setBreakpoint 创建的断点

• reloadPage：通过 CDP 重载当前页面

• waitForSpecificPause：等待下一次暂停，并判断是否命中目标文件和行

• waitForPause：不做位置匹配，等待任意暂停

• getScopeVariables：读取当前暂停帧中的局部、闭包、模块作用域变量

• evaluate：在暂停调用帧中执行 JavaScript

• stepInto、stepOver、stepOut：标准单步控制

• resume：检查完毕后恢复执行

• getStatus：非阻塞方式查询是否已连接、是否已暂停

• forcePause：请求在下一条 JavaScript 语句处暂停

推荐工作流

对于 AI 客户端，建议流程是：

1. 调用 startDebuggingSession()。

2. 调用 launchChrome()，或直接复用已经开启 CDP 端口的 Chrome。

3. 调用 listTargets()，并把完整标签页列表展示给用户。

4. 等待用户明确确认要调试的页面 URL。

5. 调用 connect({ targetUrl })。

6. 在本地源码插入临时 debugger;，或者调用 setBreakpoint()。

7. 调用 reloadPage()。

8. 在同一轮里立刻调用 waitForSpecificPause()。

9. 调用 getScopeVariables() 和 evaluate() 检查运行时值。

10. 必要时使用 stepInto()、stepOver()、stepOut() 继续跟踪。

11. 调用 resume()。

12. 删除源码里临时加入的 debugger;。

给 Agent 作者的重要规则

这个服务首先是为会调用工具的 agent 设计的，而不仅仅是给人手动点工具用。如果你要把它接入自己的 MCP 客户端，建议遵守这些规则：

• 不要跳过 listTargets()。

• 即使只看到一个标签页，也不要猜测目标 URL。

• 一定要等用户明确确认后再调用 connect()。

• 调用 reloadPage() 后，必须在同一轮里立刻调用 waitForSpecificPause() 或 waitForPause()。

• 能读取运行时值时，不要只根据静态代码解释行为。

• 检查完之后一定要 resume()。

• 如果向源码里插入了临时 debugger;，结束前要清理掉。

waitForSpecificPause 如何匹配

waitForSpecificPause 是首选的等待工具，因为它比“等待任意暂停”更可靠。

它有两层匹配策略：

1. URL 片段加行号容差

2. URL 片段加 debugger-statement 暂停原因

第二层匹配对经过 source map、转译、打包后的代码尤其重要，因为编译后的行号可能和编辑器行号不完全一致。

调用序列示例

一个 agent 调试本地 Vite 应用时，调用顺序大致会像这样：

1. launchChrome({ dryRun: true })

2. launchChrome()

3. listTargets()

4. 等用户确认 http://127.0.0.1:5173

5. connect({ targetUrl: "127.0.0.1:5173" })

6. 在 App.jsx 插入 debugger;

7. reloadPage()

8. waitForSpecificPause({ urlFragment: "App.jsx", line: 62, actionHint: "click the Refetch payloads button" })

9. getScopeVariables()

10. evaluate({ expression: "payload.modules" })

11. resume()

Chrome 启动行为

launchChrome() 会使用独立 profile，不会影响用户平时正在用的浏览器会话。

默认值：

• 远程调试端口：9222

• profile 目录：~/.chrome-debug-profile

默认 Chrome 可执行文件路径：

• macOS: /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

• Linux: google-chrome

• Windows: C:\Program Files\Google\Chrome\Application\chrome.exe

Если автозапуск не сработал, инструмент вернёт команду запуска, которую пользователь сможет выполнить вручную.

Локальный Playground

В репозитории есть одноразовое тестовое приложение в каталоге test/. С его помощью можно проверить весь цикл работы этого отладочного MCP.

Запуск mock-сервиса

cd test/service
node src/server.js

Сервис принимает запросы на http://127.0.0.1:3030.

Запуск веб-приложения

cd test/web
pnpm install
pnpm dev

Веб-приложение работает на http://127.0.0.1:5173.

Рекомендуемые места для точек останова:

• loadWorkbench в test/web/src/App.jsx

• loadModuleDetail в test/web/src/App.jsx

• рядом с ещё не завершённой областью detail в test/web/src/App.jsx

Поля payload, которые стоит посмотреть во время выполнения:

• summaryCards

• modules

• apiContracts

• nextActions

• responseShape

Устранение неполадок

Не удаётся найти targets

Убедитесь, что Chrome запущен с флагом --remote-debugging-port=9222 и целевая страница уже открыта.

targetUrl соответствует нескольким вкладкам

Передайте более специфичную подстроку URL, чтобы гарантировать уникальное совпадение.

Тайм-аут waitForPause или waitForSpecificPause

Распространённые причины:

• операции на странице не были реально вызваны

• точка останова установлена не в том месте

• тайм-аут запроса самого MCP-клиента короче, чем время выполнения вызова инструмента

Если тайм-аут клиента короткий, можно перейти на опрос через getStatus(), либо увеличить тайм-аут клиента.

Номера строк при остановке не совпадают с редактором

Сборка и транспиляция приводят к смещению номеров строк в скомпилированном коде. Предпочтительнее использовать waitForSpecificPause() и полагаться на сопоставление фрагментов URL в сочетании с семантическим сопоставлением debugger-statement.

Не удаётся автоматически запустить Chrome

Путь установки Chrome на этой машине может не совпадать со значением по умолчанию. Можно напрямую выполнить команду запуска, возвращённую инструментом, или адаптировать реализацию под ваше окружение.

Разработка

pnpm install
pnpm build
node dist/index.js

Основные файлы реализации:

• src/index.ts: определения MCP-инструментов и пользовательские подсказки по рабочим процессам

• src/chrome-manager.ts: интеграция с Chrome DevTools Protocol и управление состоянием отладки

Лицензия

MIT