AI
Browsertool

在调试网页时，你是否曾经：

  • 抓耳挠腮地寻找某个 DOM 元素的位置？

  • 疯狂 console.log() 却还是难以定位问题？

  • 想让 AI 编辑器帮忙修 bug，却苦于无法访问浏览器上下文？

现在，只需安装 BrowserTools MCP，你就可以让 AI 编辑器“看见”页面，听懂控制台输出，甚至直接参与页面调试。

这不仅是一款浏览器调试工具，更是 AI 编辑器（如 Cursor、Claude Desktop、Zed 等）与网页环境之间的桥梁，让“调试”变成一次真正的 AI 协作。

BrowserTools MCP 是什么？

由 AgentDesk (opens in a new tab) 出品，BrowserTools MCP 是一款基于 MCP（Model Context Protocol）协议的浏览器插件 + 本地服务组合套件，专为 AI 编辑器设计。

它允许 AI 工具以安全、结构化的方式读取并交互以下信息：

  • 当前选中的 DOM 元素

  • 浏览器控制台的日志与错误

  • XHR 请求与响应内容

  • 页面截图（可自动粘贴至编辑器）

  • SEO、性能、代码质量等自动审计结果

  • 启动调试模式 / 审计模式，并结合提示词快速定位 Bug 或性能瓶颈

你可以像这样自然地和你的 AI 工具对话：

  • “进入调试模式，帮我看看这个页面为什么挂了。”

  • “帮我修改当前选中的按钮，让它 hover 有动画。”

  • “我想提升首页性能，进入 Audit Mode。”

  • “控制台有报错？你能帮我查下具体是哪一行吗？”

安装

  1. 安装浏览器插件

  2. 启动server服务

  3. 启动mcp服务

安装插件

下载

git clone https://github.com/AgentDeskAI/browser-tools-mcp.git

进入扩展程序

安装扩展程序，拖入刚下载的包

安装服务

在终端里面先启动服务

 npx -y @agentdeskai/[email protected]

执行命令，服务启动

安装mcp

  1. 打开vscode

  2. 输入快捷键 ctrl + p

  3. 输入 >

  4. 找到用户设置setting.json文件

  1. 在mcp的key下面增加browserTool
"browser-tools": {
    "command": "npx",
    "args": ["-y", "@agentdeskai/[email protected]"],
    "enabled": true
}

内容如下，并且点击 Start 来启动服务

操作

打开浏览器，输入一个页面，并且打开控制台，就可以看到如下的内容了，表示启动成功。

后续的内容，我们回到vscode的copilot来进行询问。

功能

获取网页所选的元素

我们在网页选择了某个元素，让其进行获取。

获取控制台的输出日志

比如我特意写了一个tttt变量，但是没有定义的，让其进行分析，他从控制台找到了这个错误，并且也找到了这个错误所在的文件。

Cline