](https://www.npmjs.com/package/relay-inspect)
停止将控制台日志、服务器错误和屏幕截图复制和粘贴到CLI中。Relay Inspect让你的AI编码代理可以直接访问你的浏览器，这样它就可以看到你看到的内容，验证自己的更改，并在不要求你复制和粘贴的情况下进行调试。
Relay Inspect是一个轻量级的工具，适用于希望花更多时间构建和更少时间调试的设计师和工程师。
┌─ Chrome (CDP over WebSocket)
AI Coding Agent ←→ Relay Inspect (MCP over stdio) ─┤
└─ Dev Servers (child processes)Relay Inspect是Chrome DevTools协议、开发服务器和代理之间的桥梁。它将浏览器状态作为MCP工具公开——控制台输出、网络请求、DOM查询和屏幕截图。您的代理编辑代码，开发服务器热重新加载，代理自己验证结果。
正在查找注释？ 浏览器注释覆盖层已移动到自己的包中： 剂量.
为什么在Chrome DevTools MCP上进行继电器检查？
谷歌的 Chrome开发工具MCP 是一个完整的浏览器自动化工具——它点击按钮、填写表单、运行Lighthouse审核和脚本交互。Relay Inspect使代理在工作时能够持续查看，因此错误会在瞬间被发现，而不是在最后。
- 给特工们眼睛。 实时访问控制台输出、网络请求和DOM状态——这样你的代理就可以在发生时看到正在发生的事情，而不是在它已经转移之后。
- 紧密的反馈回路。 编辑→ 重新加载→ 验证循环发生在一次转弯中。您的代理进行更改，等待开发服务器重新加载，并立即确认其正常工作，而无需进行额外的来回切换。
- 专注的工具，更少的错误转弯。 少数专门构建的工具意味着你的代理会找到正确的工具，而不是在广泛的API表面上挣扎。更少的噪音，更多的信号。
- 零开销，零遥测。 在第一次工具调用时懒散地连接——没有Puppeter，也没有给家里打电话。除非你的经纪人需要，否则什么都不会跑。
工具
您的代理可以通过MCP自动访问以下工具：
浏览器检查
| 工具 | 说明 | 关键参数 |
|---|---|---|
evaluate_js | 在浏览器中执行JavaScript表达式并返回结果 | expression （字符串） |
get_console_logs | 返回缓冲控制台输出（日志、警告、错误） | clear （bool，默认值：true） |
get_network_requests | 返回捕获的网络请求和响应 | filter （URL子字符串）， clear （bool，默认值：true） |
get_network_request_detail | 获取特定网络请求的完整请求/响应正文 | requestId （字符串，来自 get_network_requests) |
get_elements | 使用CSS选择器查询DOM，并返回匹配元素的外部HTML | selector （字符串）， limit （数字，默认值：10） |
take_screenshot | 捕获当前页面的屏幕截图 | format （png/jpeg，默认值：png）， quality （0-100，仅限jpeg） |
页面控制
| 工具 | 说明 | 关键参数 |
|---|---|---|
reload_page | 重新加载当前页面（可选绕过缓存） | ignoreCache （bool，默认值：false） |
wait_and_check | 等待N秒，然后返回等待期间捕获的新控制台输出 | seconds （数字，默认值：2） |
connect_to_page | 通过ID或URL匹配切换到特定的Chrome页面目标 | id （字符串）或 urlPattern （字符串）， waitForMs （编号） |
navigate_to | 将当前页面导航到新的URL | url （字符串） |
服务器管理
| 工具 | 说明 | 关键参数 |
|---|---|---|
start_server | 启动开发服务器或后台进程并捕获其输出 | id （字符串）， command （字符串）， args （字符串\[\]）， cwd （字符串）， env （对象），可选 urlPattern + connectWaitForMs |
get_server_logs | 从托管服务器进程读取stdout/stderr输出 | id （字符串）， clear （bool，默认值：true） |
stop_server | 停止正在运行的托管服务器进程 | id （字符串） |
list_servers | 列出所有托管服务器进程及其状态 | -- |
诊断
| 工具 | 说明 | 关键参数 |
|---|---|---|
check_connection | 检查Chrome连接状态并诊断问题（不自动启动） | -- |
设置
先决条件
- Node.js 20+
- Chrome（或任何基于Chromium的浏览器）
添加到您的MCP客户端
无需安装-- npx 首次使用时下载并运行该包。
克劳德代码 --添加到 .mcp.json 或 .claude/settings.json:
{
"mcpServers": {
"relay-inspect": {
"command": "npx",
"args": ["-y", "relay-inspect"]
}
}
}Codex CLI：
codex mcp add relay-inspect -- npx -y relay-inspect开源代码 --添加到 opencode.json:
{
"mcp": {
"relay-inspect": {
"type": "local",
"command": "npx",
"args": ["-y", "relay-inspect"]
}
}
}如果Chrome尚未运行，则会在第一次工具调用时自动启动。要禁用此功能或自定义行为，请参阅下面的配置。
配置
| 环境变量 | 默认值 | 描述 |
|---|---|---|
CHROME_DEBUG_PORT | 9222 | Chrome调试端口 |
CHROME_DEBUG_HOST | localhost | Chrome调试主机 |
CHROME_AUTO_LAUNCH | true | 如果Chrome尚未运行，则自动启动 |
CHROME_PATH | _（自动检测）_ | 覆盖Chrome/Chromium可执行路径 |
CHROME_LAUNCH_URL | _（无）_ | Chrome自动启动时打开的URL（例如。 http://localhost:1420) |
CDP_WS_URL | _（无）_ | 直接连接到CDP WebSocket URL，跳过Chrome发现 |
CONSOLE_BUFFER_SIZE | 500 | 缓冲区的最大控制台条目数 |
NETWORK_BUFFER_SIZE | 200 | 缓冲区的最大网络请求数 |
SERVER_LOG_BUFFER_SIZE | 1000 | 每个托管服务器的最大日志条目数 |
如果Chrome已经在运行 --remote-debugging-port，Relay Inspect将直接连接到它，而无需启动新实例。
发展
git clone https://github.com/samsolomon/relay-inspect.git
cd relay-inspect
npm installnpm run dev # Run with tsx (auto-recompile)
npm run build # Build with tsup
npm start # Run the built bundle
npm test # Run tests with vitest有关详细的体系结构、约定和CDP实现说明，请参阅 CLAUDE.md.