Browser-Tool 前端开发神器

继上一篇《Python版MCP-Server安装配置》之后，本文将介绍一款实用的前端开发 MCP 工具：Browser Tool。首先，在 Cline 中搜索 Browser Tool，然后点击进入其 GitHub 页面：

这款 MCP 工具能让 AI 直接读取浏览器中的内容。要使用它，首先需要安装一个 Chrome 插件：

插件下载地址：https://github.com/AgentDeskAI/browser-tools-mcp/releases/download/v1.2.0/BrowserTools-1.2.0-extension.zip

以谷歌浏览器为例，此步骤的目的是安装该插件。下载完成后，打开浏览器的扩展程序管理页面（通常在菜单 -> 更多工具 -> 扩展程序）：

在页面右上角，启用“开发者模式”：

然后，将下载的插件压缩包解压到本地。进入解压后的文件夹，将里面的 chrome-extension 文件夹拖拽到浏览器的扩展程序页面中：

这样，BrowserTools MCP 插件就成功安装了：

插件安装完毕后，接着安装 Browser Tool 这个 MCP 工具。这里我们继续使用 npx 的方式进行安装。参照之前的 file system 配置方法，在 Cline 中新建一个配置项。可以复制一份现有的 file system 配置，然后将其名称修改为 browser-tool-mcp：

接下来，回到 Browser Tool 的 GitHub 页面，复制其 MCP 工具的 npx 安装命令：

@agentdeskai/browser-tools-mcp@latest

将此命令粘贴到新配置项的 args 字段中。如果复制了旧配置，请确保清除了无关参数（例如旧配置中可能存在的路径，如 "C:\\Users\\Public\\Desktop"）。browser-tool-mcp 的最终配置应如下：

"browser-tool-mcp": {
  "command": "cmd",
  "args": [
    "/c",
    "npx",
    "-y",
    "@agentdeskai/browser-tools-mcp@latest"
  ]
}

此时，查看 Cline 的 MCP Server 选项卡，browser-tool-mcp 工具应显示为绿色，表示已成功启动并等待连接：

但这还没结束，我们还需要启动 Browser Tool 的服务组件。请在命令行中执行以下命令（以 PowerShell 为例）：

npx @agentdeskai/browser-tools-server@latest

执行该命令以启动服务：

接着，打开 Chrome 浏览器，按 F12 键调出开发者工具。此时，浏览器应会提示：“BrowserTools MCP 已经开始调试此浏览器”，表明连接成功：

总结一下，要让 Browser Tool 正常工作，需要确保以下三个部分都已正确运行：

1. 1. 浏览器中已安装并启用的 BrowserTools MCP 插件：

1. 2. 在命令行中运行的 browser-tools-server 服务：

1. 3. 在 Cline 中配置并启动的 browser-tools-mcp 工具：

只有这三个部分同时运行，才能实现浏览器与 AI 之间的顺畅通讯。

现在，来实际体验一下。让 AI 分析当前浏览器的网络面板：

请分析一下浏览器的网络面板，并告诉我有哪些请求？中文回答我。

AI 给出的分析非常详细（详情参见截图）。

接下来，返回浏览器页面，在开发者工具的 Element 选项卡中选中一个 HTML 元素：

然后，让 AI 解释当前选中的元素：

浏览器我选中部分是什么，里面有何主要控件，请用中文回答我。

AI 同样能给出清晰、详细的解释（详情参见截图）。

通过以上操作，我们成功地在前端开发与 AI 之间建立了高效的沟通渠道。相比以往需要手动从浏览器 Element 选项卡复制 HTML 代码再与 AI 交互的方式，Browser Tool 极大地提升了工作效率。

因此，Browser Tool 这款 MCP 工具能够显著提高前端开发的效率。

如果你对这类能提升效率的 MCP 工具感兴趣，敬请期待我的下一篇文章，届时会给大家分享一份更全面的 MCP 工具清单，希望能为大家的开发工作带来更多便利。