cdp工具mcp
通过Chrome DevTools Protocol为AI代理提供真正的调试超能力——断点、变量检查和浏览器自动化。
npx cdp-tools-mcp@latest停止猜测，开始调试。 AI可以读取你的代码，但它看不到运行时会发生什么。此MCP服务器改变了这一点，为您的代理提供了与DevTools中使用的调试工具相同的工具：设置断点、在执行过程中检查变量、监视网络请求以及逐行遍历代码。
录制一次，重播一次。 发现一个需要5次点击才能重现的错误？记录一次序列，然后在每次修复后立即回放。没有令牌浪费重新导航，没有来回“点击蓝色按钮”。
特性
您的AI代理可以访问：
- 🐛 设置断点 并逐步检查您的代码
- 🔍 检查变量 并在运行时调用堆栈
- 📊 监控控制台日志 以及网络请求
- 🌐 自动化浏览器交互 具有智能元素发现功能
- 🔄 调试Chrome和Node.js 应用程序同时
- 🤖 多代理支持：嵌套的Claude代理可以各自管理自己的浏览器选项卡
- 🎯 目标服务器管理：MCP，自动监控端口和管理服务器进程。如果出现故障，所有工具都会被阻止，直到LLM修复问题。
- 📋 问题跟踪：使用记录的复制序列跟踪错误和功能，自动验证修复
快速开始
克劳德代码：
claude mcp add cdp-tools -- npx cdp-tools-mcp@latest克劳德桌面版 --添加到您的配置文件中：
{
"mcpServers": {
"cdp-tools": {
"command": "npx",
"args": ["-y", "cdp-tools-mcp@latest"]
}
}
}其他MCP客户端 --奔跑 npx cdp-tools-mcp@latest 通过stdio传输。
主要特点
运行时调试
- 断点管理：设置、删除和列出断点（包括条件断点和日志点）
- DOM/事件/XHR断点：在DOM突变、事件分派或网络请求时暂停
- 执行控制：暂停、继续、跨过/进入/退出
- 计量检验：在运行时检查调用堆栈、变量和作用域
- 源地图支持：使用自动源代码映射检测调试TypeScript代码
- 通用：适用于Chrome浏览器和Node.js应用程序
浏览器自动化（仅限Chrome）
- 智能导航：使用自动可点击元素缓存进行导航
- 元素发现：导航通过视口感知过滤自动缓存所有交互式元素（链接、按钮、输入）
- DOM检查：查询元素、获取属性、截图
- 用户交互：单击、键入、悬停、按键
- 控制台和网络监控：使用深度序列化跟踪日志和HTTP请求
- 存储访问：检查和修改本地存储、会话存储、Cookie
- 互动记录：使用视觉覆盖记录鼠标、键盘和导航事件
- 测试导出：将录音导出为剧作家或木偶师测试
多代理支持
- 选项卡管理：嵌套的Claude代理可以在同一个Chrome实例中创建和管理自己的浏览器选项卡
- 连接管理：使用隔离连接同时调试Chrome和Node.js
- 港口装卸：自动端口分配可防止运行多个会话时发生冲突
服务器管理
- 语言无关：运行任何命令-npm、flask、docker或自定义脚本
- Docker支持：原生支持Docker容器和Docker Compose堆栈
- 多会话协调：多个MCP会话共享相同的开发服务器，没有端口冲突
- 端口监控：使用可配置的响应级别（通知、错误、阻止）检测服务器故障
- 持久状态：服务器PID、端口和配置在会话重启后仍然有效
- 自动重启：启用了autoRun的服务器会以指数级回退自动重新启动
- 跨会话日志：基于文件的日志记录允许任何会话读取服务器输出
问题跟踪
- Bug和功能工作流程：创建问题，记录复制步骤，并通过自动回放验证修复
- 基于序列的验证:
workOn导航到上下文，resolve重放并确认修复
示例用法
Web调试：
1. Ask Claude: "Launch Chrome and navigate to https://myapp.com"
2. Claude launches browser, caches all clickable elements
3. Ask: "Find all login-related links"
4. Claude searches cached elements instantly
5. Ask: "Click the login button and watch for errors"
6. Claude interacts and monitors console/networkNode.js调试：
1. Start your app: node --inspect=9229 app.js
2. Ask Claude: "Connect to my Node app and set a breakpoint in user.js line 42"
3. Trigger the code path
4. Ask: "What are the values of userId and userRole?"
5. Claude inspects variables and provides insights文档
为什么使用cdp工具mcp？
与Chrome DevTools MCP相比：
- ✅ 断点调试 -设置断点，遍历代码，在运行时检查变量
- ✅ Node.js调试 -调试后端应用程序，而不仅仅是浏览器
- ✅ 多连接支持 -同时调试Chrome和Node.js
- ✅ 日志点 -添加日志记录而不修改源代码
- ✅ 回放系统 -记录和回放用于测试和自动化的命令序列
最适合： 后端调试、全栈调试、理解代码执行流程
Chrome 开发者工具 MCP 更适合性能分析、设备仿真和高级浏览器自动化。
试试看
查看我们的 测试应用程序 有8个调试挑战，涵盖DOM错误、网络问题、断点、日志点和多连接调试。
从源安装
git clone https://github.com/InDate/cdp-tools-mcp.git
cd cdp-tools-mcp
npm install
npm run build
npm start贡献
欢迎投稿！这是一个演示LLM运行时调试功能的原型。请根据您的需求自由扩展和改进。
许可证
麻省理工学院
最新动态
最新
- 问题跟踪新
issues使用记录的再现序列和自动验证进行错误/特征跟踪的工具 - 录制幸存导航：通过适当的连接清理，覆盖在页面刷新过程中保持不变
- 互动记录：使用视觉覆盖记录鼠标点击、拖动、滚动、键盘输入和导航事件-在录制过程中使用Ctrl+Shift+C添加注释
- 可视化回放光标：使用动画光标和涟漪效果准确查看回放过程中点击的位置
- 测试导出：将录音导出为Playwright（.spec.ts）或Puppeteer（.test.js）测试
export({ name: "my-test", format: "playwright" }) - 组态管理新
config管理设置的工具-在本地/全局配置、备份、重置和查看当前配置之间切换 - 跨目录服务器访问：使用
global: true标记以访问从其他工作目录启动的服务器 - DOM/事件/XHR断点：暂停DOM突变(
setDOMBreakpoint)，事件调度(setEventBreakpoint)，或网络请求(setXHRBreakpoint)使用CDP的DOMDebugger域 - 重播重复操作：立即重新执行历史记录中的命令
replay({ action: 'repeat', indices: [0, 1, 2] })-每个工具响应现在都显示其历史索引，以便于重复 - UI验证：通过基于CDP的验证检测死按钮、断开的链接、小触摸目标和溢出问题-没有启发式方法，只有事实
- DOM更改检测：准确查看每次点击、键入或悬停后发生了什么变化——不再猜测按钮的作用
- 端口监控：使用检测服务器故障
monitorPort操作-可配置级别（通知、错误、阻止）在受监控端口关闭时影响工具响应 - Docker支持：服务器管理现在支持Docker容器和Docker Compose堆栈以及本机进程
- 语言无关服务器：通用命令执行取代了npm特定的逻辑-运行任何命令（flask、python、go等）
- 可变检查回退:
getVariables当数据超过令牌限制（满→ 深度减小→ 仅名称→ 仅计数） - 陈旧连接清理：当Chrome从外部关闭或标签页关闭时，自动检测并删除死连接
- 断点暂停检测：输入操作现在可以检测并报告何时触发断点
- 多会话服务器协调：多个MCP会话共享具有持久状态、自动重启和跨会话日志访问的开发服务器
- Webpack评估支持：代码搜索现在从webpack eval包装器中提取实际源代码
- 延迟源代码映射加载：按需加载可提高启动性能
- 缓存破坏断点：断点在更改查询参数的重建后仍然存在
- 灵活连接参考：查找现在允许微小的格式变化
- 增强型回放系统：记录和回放用于测试和自动化的命令序列
- 条件命令：序列可以根据运行时条件（选择器、URL、Cookie、本地存储）进行分支，并具有可配置的深度限制
- 智能元素缓存：导航会自动缓存所有可点击的元素，以便即时发现
- 视口感知过滤：默认情况下仅显示可见元素，筛选时搜索所有元素
- 综合工具API：基于动作的工具模式减少了工具数量并提高了可用性
- 调试日志记录：跟踪服务器操作
setDebugLogging({ enabled: true })
请参阅 文档 查看详细的功能文档。