检查 React 元素并通过 MCP 将组件上下文发送到 Claude Code
Claude Bridge 在 Chrome DevTools 中添加了一个面板，可让您检查网页上的任何元素并将其完整上下文发送到 Claude Code。
它是如何运作的
1.打开DevTools并进入“Claude Bridge”面板
2. 点击“检查”进入检查模式
3. 将鼠标悬停在元素上可查看突出显示的组件名称
4. 单击一个元素以捕获它（检查模式自动停止）
5. 元素数据在您的 Claude Code 会话中立即可用
捕获了什么
- React组件名称和源文件路径
- 组件道具（已清理，功能和大型物体除外）
- 组件祖先链（最多 3 级）
- CSS 选择器和外部 HTML
- 计算样式（布局、排版、颜色、间距）
- 边界框和页面 URL
设置
1.安装扩展
2. 运行：claude mcp add claude-bridge --npx claude-bridge-mcp
3. 在任意页面上打开 DevTools — 查找“Claude Bridge”选项卡
适用于任何网站。 React 组件信息可在 React 网站上找到； DOM 和样式捕获无处不在。
隐私
一切都在本地运行。捕获的数据仅发送到您计算机上的本地 MCP 服务器 (localhost:18925)。不会收集任何数据或将其传输到外部服务器。
