MCP 插件实战：以 browser-tools-mcp 为例配置浏览器调试工具
MCP（Model Context Protocol）让 AI 模型能够安全地调用本地工具。今天聊聊如何用 browser-tools-mcp 把浏览器开发者工具接入到 Cline 等 AI 编程助手里，实现自动化的前端调试。
环境准备
首先确保你的开发环境里有 Node.js 和 Git。这个工具基于 Node 运行，所以版本兼容性很重要。
# 创建工作目录并进入
mkdir -p ~/projects/mcp/browser-tools-mcp
cd ~/projects/mcp/browser-tools-mcp
# 克隆仓库
git clone https://github.com/AgentDeskAI/browser-tools-mcp.git .
安装与服务启动
进入项目目录后，直接安装依赖并启动服务。注意这里用的是官方发布的 npm 包，版本号建议保持最新稳定版。
npm install @agentdeskai/[email protected]
npx @agentdeskai/[email protected]
npx @agentdeskai/[email protected]
如果不确定具体命令，可以参考官方文档的说明：Browser Tools Installation。启动成功后，终端会显示服务已就绪，这时候就可以进行下一步了。
浏览器插件配置
为了让 MCP 能真正控制浏览器，还需要在 Chrome 或 Edge 中安装对应的扩展程序。从 GitHub Release 页面下载 zip 包，解压后在浏览器的'扩展管理'中选择'加载已解压的扩展程序'即可。
下载地址：BrowserTools Extension v1.2.0
安装完成后，浏览器右上角会出现 Browser Tools 的图标，这表示插件已激活。
Cline 服务配置
接下来是核心步骤，需要在 Cline 的配置文件中注册这个 MCP 服务。找到你的 Cline 配置文件（通常是 settings.json 或类似位置），添加如下配置项。
注意： 下面的路径需要根据你实际的服务器脚本位置进行修改。
{
"mcpServers": {
"browser-tools-mcp": {
"command": "node",
"args": ["<your_project_path>/browser-tools-mcp/dist/mcp-server.js"],
"disabled": false,
"autoApprove": []
}
}
}
这里的 command 指向 Node 可执行文件，args 指向具体的服务端入口脚本。autoApprove 留空意味着每次操作都需要确认，比较安全；如果确定信任该工具，可以填入允许的操作列表。
效果验证
配置保存并重启 Cline 后，打开一个网页，尝试让 AI 助手读取页面元素或调试网络请求。你会发现浏览器侧边栏多出了 Browser Tools 的面板，AI 可以直接通过 MCP 协议与它交互。
这样配置的好处是，AI 不仅能看代码，还能实时看到浏览器渲染结果和网络状态，对于排查前端问题非常直观。如果遇到连接失败，优先检查 Node 版本是否匹配，以及防火墙是否拦截了本地端口通信。
