Inspector Jake MCP

杰克探长

指示您的代理通过点击进行更新。

](https://www.npmjs.com/package/inspector-jake-mcp) 

什么是杰克探长？

Inspector Jake是一个MCP（模型上下文协议）服务器，它将Claude等AI助手连接到Chrome DevTools。代理可以通过ARIA树检查页面结构，捕获屏幕截图，读取控制台日志，监控网络请求，并通过点击、键入和导航与元素进行交互。

会话管理

当MCP服务器启动时，它会自动选择可用的会话名称和端口 get_session_info 找出您正在参加的会话，以及 set_session_name 切换。

获取会话名称

代理人应致电 get_session_info 在对话开始时，告诉您在Chrome扩展程序中连接哪个会话：

// Response from get_session_info
{
  "sessionName": "annie",
  "port": 52992,
  "browserConnected": true,
  "connectedTab": { "id": 123, "title": "My App", "url": "https://myapp.com" }
}

打开Inspector Jake DevTools选项卡并连接到上面显示的会话名称。

更改会话名称

使用 set_session_name 在运行时切换到不同的会话。预定义名称(jake, annie, kevin, elsa)由Chrome扩展程序自动发现。自定义名称也可以使用——响应中包括手动连接的端口。

// Request
{ "name": "jake" }

// Response
{
  "message": "Switched session from \"annie\" to \"jake\"",
  "sessionName": "jake",
  "port": 52340,
  "previousName": "annie",
  "previousPort": 52992
}

切换后，重新扫描Chrome扩展程序中的会话并连接到新名称。之前的浏览器连接已断开。

DevTools面板

Inspector Jake DevTools面板是您用于捕获元素、为AI代理注释元素以及查看计算样式和可访问性树的工作区。

杰克的笔记

固定元素或拖动以捕获区域，然后为AI代理添加注释。当代理调用时，注释作为上下文显示 see_jakes_notes。将它们用于以下请求 *“将此按钮放大”*, *“在此处修复对齐”*，或 *“这个颜色不对”*.

为什么ARIA树而不是原始HTML

Inspector Jake使用ARIA可访问性树而不是原始HTML进行页面检查。原始HTML对于LLM上下文窗口来说过于冗长和嘈杂。ARIA树是一种紧凑的语义表示——角色、名称和状态捕获用户看到的内容并与之交互。每个元素都得到一个ref（例如。， s1e42)它直接映射到交互工具，如 click_element 和 type_into_element.

计算样式和发送样式

CSS面板显示所选元素的计算样式。这 发送样式 设置控制代理在读取选择时接收多少CSS上下文：

• 无 --完全跳过计算样式（节省标记）
• 精益 --布局+视觉要素（显示、柔性、填充、颜色、字体）
• 非违约 --仅更改了浏览器默认值的属性
• 全部 --每个计算属性（最详细）

配置

• 计算样式 --选择要发送多少CSS上下文（无/精简/非默认/全部）
• 屏幕截图——最大尺寸 --超过此限制（200-2000px，默认800）的屏幕截图将按比例缩小
• 自动清除选择 --代理通过以下方式读取捕获后自动清除捕获 see_jakes_notes

建筑

┌─────────────────┐                    ┌─────────────────────┐
│   AI Agent      │───MCP Protocol────▶│   MCP Server        │
│ (Claude, etc)   │                    │   inspector-jake    │
└─────────────────┘                    └──────────┬──────────┘
                                                  │ WebSocket
                                                  ▼
                                       ┌─────────────────────┐
                                       │  Chrome Extension   │
                                       │  (connected tab)    │
                                       └──────────┬──────────┘
                                                  │
                                                  ▼
                                       ┌─────────────────────┐
                                       │  DevTools Panel     │
                                       │  (element tracking) │
                                       └─────────────────────┘

快速开始

1.安装MCP服务器

npx inspector-jake-mcp

2.配置您的MCP客户端

对于Codex CLI，直接将Codex的MCP管理器与npm包一起使用：

# 1) Add Inspector Jake MCP server to Codex
codex mcp add inspector-jake -- npx -y inspector-jake-mcp@1.0.10

# 2) Verify it was added
codex mcp list
codex mcp get inspector-jake

重要提示：不要将Codex配置为 command: inspector-jake-mcp 除非该二进制文件已全局安装。使用 npx 如上所示。

如果你看到 No such file or directory (os error 2)，重新添加完整 npx 路径：

which npx
codex mcp remove inspector-jake
# Replace /opt/homebrew/bin/npx with the path printed by `which npx`
codex mcp add inspector-jake -- /opt/homebrew/bin/npx -y inspector-jake-mcp@1.0.10

对于Claude Code（全球，适用于所有项目）：

claude mcp add --scope user --transport stdio inspector-jake -- npx -y inspector-jake-mcp

对于Claude Code（项目范围）：

claude mcp add --transport stdio inspector-jake -- npx -y inspector-jake-mcp

对于Claude Desktop，添加到您的配置中(~/.config/claude/claude_desktop_config.json 在macOS/Linux上）：

{
  "mcpServers": {
    "inspector-jake": {
      "command": "npx",
      "args": ["-y", "inspector-jake-mcp"]
    }
  }
}

对于其他MCP客户端（通用stdio）：

{
  "inspector-jake": {
    "command": "npx",
    "args": ["-y", "inspector-jake-mcp"],
    "transport": "stdio"
  }
}

更新

如果您为客户端配置了 npx -y inspector-jake-mcp （无固定版本），下次服务器启动时，您将自动获得最新版本。无需采取任何行动。

如果你固定了一个版本（例如。 inspector-jake-mcp@1.0.10)，更新配置中的版本号或重新运行 mcp add 使用新版本的命令。

如果全局安装：

npm update -g inspector-jake-mcp

3.加载Chrome扩展程序

1. 打开Chrome浏览器并转到 chrome://extensions/
2. 启用“开发人员模式”（在右上角切换）
3. 点击“加载解包”
4. 选择 packages/chrome-extension/dist 文件夹

对于Chrome网上应用商店的上传，请从内部创建一个zip dist:

cd packages/chrome-extension/dist
zip -r ../../../inspector-jake-chrome-store.zip .

重要提示：zip必须包含 manifest.json 在根目录下（不在顶级目录内 dist/ 文件夹）。

4.连接

1. 导航到任何网页
2. 打开DevTools（F12）
3. 点击“Jake”标签
4. 点击“连接”到您的MCP会话

MCP工具（17）

检查

交互

导航

工具示例

get_page_info

返回页面元数据和带有交互式元素引用的ARIA树（例如。， s1e42)它可以与 click_element, type_into_element以及其他交互工具。

答复：

Page: Example Page
URL: https://example.com
Viewport: 1920x1080

- navigation [s1e1|nav]
  - link "Home" [s1e2|a.nav-link]
  - link "About" [s1e3|a.nav-link:nth-of-type(2)]
- main [s1e4|main]
  - heading "Welcome" [level=1] [s1e5|h1]
  - textbox "Search" [s1e6|input#search]
  - button "Submit" [s1e7|button.btn]

capture_screenshot

请求：

{
  "selector": "#submit-btn"
}

返回匹配元素的base64编码的PNG图像。

click_element

请求（来自get_page_info的引用）：

{
  "ref": "s1e7"
}

请求（通过CSS选择器）：

{
  "selector": "#submit-btn",
  "clickCount": 2
}

get_sole_log

请求：

{
  "types": ["error", "warn"],
  "clear": true
}

答复：

{
  "logs": [
    {"type": "error", "message": "Uncaught TypeError: x is not a function", "timestamp": 1700000000000},
    {"type": "warn", "message": "Deprecated API usage", "timestamp": 1700000001000}
  ]
}

get_network_requests

请求：

{
  "urlPattern": "/api/",
  "method": "POST",
  "statusMin": 400,
  "clear": true
}

答复：

{
  "requests": [
    {
      "url": "https://example.com/api/users",
      "method": "POST",
      "status": 422,
      "statusText": "Unprocessable Entity",
      "type": "fetch",
      "requestHeaders": { "content-type": "application/json" },
      "responseHeaders": { "content-type": "application/json" },
      "duration": 145,
      "timestamp": 1700000000000
    }
  ]
}

所有参数都是可选的。忽略它们以获取所有捕获的请求。捕获fetch（）和XMLHttpRequest流量——不包括请求/响应体。

run_javascript

请求：

{
  "code": "document.title"
}

答复：

{
  "result": "My App - Dashboard"
}

会话发现

该扩展使用预定义的会话名称发现MCP服务器(jake, annie, kevin, elsa)，每个都通过哈希映射到一个确定性端口。当MCP服务器启动时，它会选择第一个可用名称并监听其端口。扩展会扫描所有四个端口以查找活动服务器。

您还可以在运行时使用以下命令切换到自定义会话名称 set_session_name自定义名称会获得一个确定的端口，但不会被扩展自动发现——代理会告诉您手动连接的端口号。

发展

先决条件

• Node.js 18+
• npm 9+
• Chrome浏览器

设置

git clone https://github.com/inspectorjake/inspector-jake.git
cd inspector-jake
npm install
npm run build
npm test

项目结构

inspector-jake/
├── packages/
│   ├── mcp-server/          # MCP server (npm package)
│   │   ├── src/
│   │   │   ├── index.ts           # CLI entry
│   │   │   ├── server.ts          # MCP server + tools
│   │   │   ├── ws-server.ts       # WebSocket for extension
│   │   │   └── response-builder.ts # Response formatting utilities
│   │   └── package.json
│   │
│   ├── chrome-extension/    # Chrome extension (Manifest V3)
│   │   ├── src/
│   │   │   ├── background/  # Service worker
│   │   │   ├── content/     # Content script
│   │   │   ├── devtools/    # DevTools panel
│   │   │   └── popup/       # Extension popup (Vue)
│   │   ├── manifest.json
│   │   └── package.json
│   │
│   └── shared/              # Shared types and utilities
│       └── package.json
│
└── package.json             # Workspace root

观看模式

# In separate terminals:
cd packages/shared && npm run dev
cd packages/mcp-server && npm run dev
cd packages/chrome-extension && npm run dev

贡献

看 贡献.md 发展指南。

安全

看 安全.md 安全政策。

许可证

麻省理工学院-见 许可证