MCP 插件实战：以 browser-tools-mcp 为例集成浏览器调试工具

MCP 插件实战：以 browser-tools-mcp 为例集成浏览器调试工具

在使用 AI 辅助编程时，让模型直接操作浏览器往往能解决很多复杂问题。这里以 browser-tools-mcp 为例，演示如何配置 MCP 服务，实现 Cline 与浏览器调试工具的联动。

环境准备

首先确保本地已安装必要的开发工具。我们需要 Node.js 和 Git 环境。

# 检查版本
node -v
git --version

安装 MCP 服务

创建一个工作目录并克隆项目。路径可根据个人习惯调整。

mkdir -p ~/projects/mcp/browser-tools-mcp
cd ~/projects/mcp/browser-tools-mcp
git clone https://github.com/AgentDeskAI/browser-tools-mcp.git .

接着安装依赖并启动服务。注意命令中不要漏掉空格。

npm install @agentdeskai/[email protected]
npx @agentdeskai/[email protected]

参考官方文档获取更多信息：Browser Tools Installation。

浏览器插件配置

在 Chrome 或 Edge 浏览器中加载扩展程序。下载链接如下：

BrowserTools 扩展下载

安装后，浏览器侧边栏应出现调试工具入口。

![浏览器插件加载成功示意]

Cline 服务配置

在 Cline 的配置文件中添加 MCP 服务定义。关键是指向正确的服务器脚本路径。

{
  "browser-tools-mcp": {
    "command": "node",
    "args": ["/path/to/browser-tools-mcp/dist/mcp-server.js"],
    "disabled": false,
    "autoApprove"