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": [

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