内容
# chrome-dev-mcp
[](https://npmjs.org/package/chrome-dev-mcp)
●用于Chrome网页前端开发的MCP服务器。
●该项目专注于Chrome运行时调试。
## 为什么存在该项目
●目前，[chrome-devtools-mcp](https://www.npmjs.com/package/chrome-devtools-mcp)仍然更专注于浏览器自动化和检查，而不是完整的运行时调试，尽管它显然正在朝着暴露更多DevTools功能的方向发展，如[使用Chrome DevTools MCP调试浏览器会话](https://developer.chrome.com/blog/chrome-devtools-mcp-debug-your-browser-session?utm_source=chatgpt.com)中所述。
●与此同时，通过[chrome-remote-interface](https://github.com/cyrus-and/chrome-remote-interface)和[@jridgewell/trace-mapping](https://github.com/jridgewell/trace-mapping)等工具，已经可以使用底层调试功能。
●该项目的存在是为了提供一个更快、更独立的实现，专门用于使Chrome运行时调试对AI代理可用，在chrome-devtools-mcp正式提供类似功能之前。
### 与chrome-devtools-mcp的架构差异
●chrome-devtools-mcp直接在Node.js中运行DevTools SDK模型（`TargetManager`、`DebuggerModel`、`NetworkManager`等），通过`chrome-devtools-frontend`的`/mcp/mcp.js`入口，借助Puppeteer CDP连接 — 这些功能超出了原始Chrome DevTools协议直接暴露的功能。
●这种方法带来了权衡：`chrome-devtools-frontend`是一个非常大的包（它映射了整个Chrome DevTools前端代码库），并且这种方法依赖于DevTools页面的内部结构在Chrome版本之间保持稳定。
●该项目采取了相反的方法：通过`chrome-remote-interface`使用纯CDP，没有DevTools SDK，依赖最小。结果是一个轻量级服务器，易于安装、审计和扩展。
## 限制
■ **连接到当前活动的Chrome标签页**（Chrome窗口中可见的`page`目标）。如果打开多个Chrome窗口，则使用找到的第一个可见标签页。目前不支持iframe、worker和service worker。
■ **不设计为与chrome-devtools-mcp一起运行**。两者都注册了重叠的工具名称，并针对同一个Chrome目标维护独立的调试器状态，这可能会导致AI混淆和潜在的状态冲突。
## 前提条件
- Node.js 22+
- Google Chrome
## 使用方法
### Chrome
▲使用远程调试功能启动Chrome。
```
chrome.exe --remote-debugging-port=9222 --user-data-dir=C:\chrome-debug-profile
# --user-data-dir可以是任何空目录；它将调试会话与您的正常Chrome配置文件隔离。
```
▲通过在浏览器中打开http://localhost:9222/json验证远程调试是否活跃 — 它应该返回一个可调试目标的JSON列表。
▲打开您要调试的页面。
▲此MCP服务器将连接到Chrome窗口中当前活动的标签页。
### Claude Code配置
#### 通过npm包
##### 使用固定版本
▲全局安装npm包。
```
npm install -g chrome-dev-mcp
```
▲将服务器添加到Claude Code的MCP。
```
claude mcp add --transport stdio chrome-dev -- chrome-dev-mcp
```
▲Claude Code的配置文件（`~/.claude.json`）将如下所示：
```json
"mcpServers": {
"chrome-dev": {
"type": "stdio",
"command": "chrome-dev-mcp",
"args": [],
"env": {}
}
},
```
##### 始终使用最新版本
▲将服务器添加到Claude Code的MCP。
```
claude mcp add --transport stdio chrome-dev -- npx -y chrome-dev-mcp@latest
# '-y'在20260522不支持。我们可能需要更改下面的配置目录。
```
▲Claude Code的配置文件（`~/.claude.json`）将如下所示：
```json
"mcpServers": {
"chrome-dev": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"chrome-dev-mcp@latest"
],
"env": {}
}
},
```
#### 通过本地项目
▲克隆此项目到本地。
▲将服务器添加到Claude Code的MCP。
```
claude mcp add --transport stdio chrome-dev -- node "path/to/chrome-dev-mcp/dist/index.js"
```
▲Claude Code的配置文件（`~/.claude.json`）将如下所示：
```json
"mcpServers": {
"chrome-dev": {
"type": "stdio",
"command": "node",
"args": ["path/to/chrome-dev-mcp/dist/index.js"],
"env": {}
}
}
```
### 验证
●运行`claude mcp list`，它将打印`chrome-dev: xxxxx - ✓ Connected`。
## MCP工具
### 页面检查
| 工具 | 描述 |
| ----------------------- | -------------------------------------------------------------------------------------------------------------- |
| `get_title` | 当前页面标题 |
| `get_url` | 当前页面URL |
| `get_html` | 完整页面HTML（限制20,000字符） |
| `evaluate_js` | 运行任意JavaScript并返回结果 |
| `get_computed_style` | 指定CSS选择器的计算CSS属性 |
| `element_from_point` | 指定选择器的边界框位置的最上层元素 |
| `screenshot` | 当前视口的PNG截图 |
| `get_inspected_element` | 通过`window.$0 = $0`在DevTools控制台中标记的元素的标签、ID、类、属性和outerHTML |
### 控制台
| 工具 | 描述 |
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `get_console_logs` | DevTools控制台中可见的所有消息 — 包括此服务器连接之前存在的输出。异常及其完整的堆栈跟踪（如果可用，则源映射）被报告。支持按级别（`log` / `info` / `debug` / `warning` / `error` / `exception`）和可选的`clear`标志过滤，以刷新缓冲区。 |
### 调试器
| 工具 | 描述 |
| --------------------- | ------------------------------------------------------------------------------------------------------------------- |
| `get_debugger_state` | 暂停状态、暂停原因、命中断点和包含文件 + 行号的完整调用栈（如果可能，映射到源代码） |
| `get_scope_variables` | 调用帧作用域内的变量值（`local`、`closure`、`block`、`global`等） |
| `evaluate_at_frame` | 在暂停的调用帧作用域中评估JavaScript表达式 — 可以访问局部变量、闭包和`this` |
| `set_breakpoint` | 通过URL + 行号设置断点；支持条件和URL正则 |
| `remove_breakpoint` | 通过ID删除断点 |
| `list_breakpoints` | 此会话中所有活动的断点 |
| `pause_execution` | 立即暂停JavaScript执行 |
| `resume_execution` | 在暂停或断点后继续 |
| `step_over` | 执行当前行，暂停在下一行（跳过调用）；返回更新的调用栈 |
| `step_into` | 进入当前行的函数调用；返回更新的调用栈 |
| `step_out` | 从当前函数返回到调用者；返回更新的调用栈 |
## 典型调试工作流
◆手动将Chrome带到所需状态 — 导航到特定路由、触发流程或在断点处暂停。
◆询问AI您要调查的内容，它将在需要时自动调用`get_debugger_state`、`get_scope_variables`等。
◆要与AI共享特定DOM元素，请在元素面板中选择它，然后在DevTools控制台中运行：
```js
window.$0 = $0;
```
然后，AI可以调用`get_inspected_element`读取其标签、属性和HTML。
```
# 示例序列Claude可能使用
get_debugger_state → { paused: true, callStack: [{ functionName: "handleClick", url: "...", lineNumber: 42 }] }
get_scope_variables → [{ name: "event", type: "object", value: "MouseEvent" }, ...]
evaluate_at_frame → expression: "dropTargets.map(t => t.id)" → ["list-1", "list-2"]
```
> `evaluate_at_frame`在暂停的帧作用域中运行，可以读取局部变量，而`evaluate_js`在全局作用域中运行，不能读取。
## 开发
●通过`pnpm install`安装依赖，然后：
```
pnpm dev # 开发（tsx监视）
pnpm build # tsc类型检查 + 编译到dist/
pnpm start # 运行编译后的构建
pnpm test # 运行vitest
```
