cursor 安装BrowserTools MCP

下面都是文字版本，带图片完整版查看语雀文档：
https://www.yuque.com/liuxc-ifpg4/cogofl/gw4zlmvdq5pykxcu?singleDoc# 《安装相关》

一、 网站定位报错
○ 网站前端问题的解决方案，可以直接选中元素给cursor。
调试方式对比
○ 手动方式：复制浏览器控制台日志 → 粘贴给 Claude 分析。
○ 高效方式：安装 BrowserTools MCP,让 cursor 直接读取调试信息。
官方地址：https://browsertools.agentdesk.ai/installation
二、 浏览器安装与配置 BrowserTools
(一) 下载浏览器插件压缩包并解压至本地。文件地址
通过网盘分享的文件：BrowserTools MCP
链接: https://pan.baidu.com/s/1iMmfza-TvKEQDTMPnMpjeQ?pwd=w92g 提取码: w92g

(二) 浏览器扩展页面 → 开启“开发者模式” → 加载未打包扩展程序 → 选择解压文件夹。
三、 cursor或者claude 设置
(一) 在 Cursor 终端安装服务端并启动（占用端口 3025）：
1. 如果是Claude，直接运行安装命令：claude mcp add browser-tools npx @agentdeskai/browser-tools-mcp@latest
2. 如果是cursor安装：

3. 点击 New MCP Server,就会出现下面这个
4. cursor 新建一个终端：然后启动命令：npx @agentdeskai/browser-tools-server@1.2.0，再回到cursor的mcp设置界面，就会出现后面的绿色开关开了，证明是cursor 是OK的，已经启动了一个服务器端口。这个端口号如下面启动之后会告诉你的，一般是3025

四、 在你启动的前端界面浏览器 DevTools → 插件设置页(要连接上刚在cursor启动的服务器端)：
注意：如果没有， BrowerToolsMCP，就重启一下浏览器。

• 截图路径：
• 端口号：3025 → 点击 Test Connection 显示 “连接成功”。
  五、 自动调试流程
  ○ Claude 通过 BrowserTools 抓取错误日志 → 自动定位并修复代码。
  ○ 多轮“刷新网页 → 获取日志 → 修复”直至错误提示消失。
  ○ 调试完成：Claude的命令：执行 /clear 释放上下文 → /init 更新记忆 → Git 存档当前状态。

参考视频链接：
https://www.bilibili.com/video/BV1W9F6zBEpN?spm_id_from=333.788.videopod.episodes&vd_source=0d8d96480071dbae8cec5ffa08e9e147&p=6