如果你有过前端项目开发的经历，那么一定会经常打开浏览器自带开发者工具，查看网络请求或者控制台日志等等。遇到问题还会复制粘贴里面信息去搜索引擎搜索信息。即使当前ai非常强大，你也不得不手动告知ai你遇到的上下文情景。来来回回操作会非常繁琐，幸运的是这个mcp工具——browser-tools-mcp转为解决上面的问题而生。

怎么用呢？

1. 前提条件

由于是javascript开发，确保电脑上有安装node

2. step1: 浏览器安装插件

需要注意的是，如果你直接在chrome扩展商店是搜不到的，应该没上架。所以要手动去github.com/AgentDeskAI… 下载扩展安装包，解压后；在浏览器中通过打开开发者模式手动安装。

3. step2: 使用工具中添加mcp

假设你使用的是cursor，那么进入设置界面

添加添加New Mcp server配置如下信息

{
  "mcpServers": {
    "browser-tools": {
      "command": "npx",
      "args": ["@agentdeskai/browser-tools-mcp@latest"]
    }
  }
}

4. step3: 终端启动工具服务

这一步必不可少，它是一个中间服务，用于与你浏览器中的插件通信；启动后你也能看到些日志信息

5. step4: 直接使用

1. 首先打开我们安装的插件
2. 打开页面的开发者工具窗口

3. 在你的IDE中调用mcp即可获取到相关的调试信息

可以看到成功获取了浏览器开发工具中的信息。

最后

它的主要好处是打通了ai和浏览器调试的鸿沟，ai能直接获取到调试信息，大大加快代码调试速度。