Cdp Tools MCP

cdp工具mcp

](https://www.npmjs.com/package/cdp-tools-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/network

Node.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

文档

• 综合指南 -详细用法、示例和高级模式
• 工具说明 -MCP工具参考和最佳实践
• 消息模板 -响应格式和错误消息

为什么使用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 })

请参阅 文档 查看详细的功能文档。