我让AI接管了浏览器！Browser Tools MCP教程：自动Debug+截屏+SEO分析
小白友好，且效率翻倍
大家好，我是阿星👋！
最近大火的MCP让更多人get到了AI自动化的神奇。
我发现一款很实用的浏览器MCP：AgentDesk——Browser Tools，不但能让小白get一下神奇之处，还能帮到开发同学。
比如——自动截图
咔咔就给你截图到本地文件夹啦～
再比如——
快速检查和提取信息（如元素、属性、文本内容）不用F12打开控制台去点元素、手动找；模拟执行操作，比如重复提交表单提交，自动化测试……（来自 @Thinkdu老师）
从阿星一个小白的角度来说，平常都是自己手动复制项目报错信息到cursor，现在可以自动拿到它的技术栈分析了。
cursor感知到我的项目上下文后，我直接在cursor里二次编程，不用一遍遍给cursor传话了。
它的功能不止于此，可以运用于专业开发👇🏻也很适合技术小白加深对技术栈的理解。每个功能对应的提问方式在github里，可以直接模仿。
Browser Tools MCP 功能列表
获取控制台日志 (getConsoleLogs)
获取控制台错误 (getConsoleErrors)
获取网络错误 (getNetworkErrors)
获取网络日志 (getNetworkLogs)
截取页面截图 (takeScreenshot)
获取选中元素 (getSelectedElement)
清除日志 (wipeLogs)
运行可访问性审计 (runAccessibilityAudit)
运行性能审计 (runPerformanceAudit)
运行SEO审计 (runSEOAudit)
运行NextJS审计 (runNextJSAudit)
运行调试模式 (runDebuggerMode)
运行审计模式 (runAuditMode)
运行最佳实践审计 (runBestPracticesAudit)
我们一起来看看怎么安装吧～
下载 AgentDesk MCP
找到官直接下载他们已经上架的chrome插件。点击右侧的installation然后点击click here。官网地址是：https://browsertools.agentdesk.ai/installation
也可以跳转到github👇小白直接点击绿色按钮下载到本地即可。
也可以直接克隆项目到本地：
git clone https://github.com/AgentDeskAI/browser-tools-mcp.git
记住你的下载位置，一会儿还要回来拖拽到浏览器里。
接着打开chrome浏览器，安装 Chrome 扩展程序。
打开“管理扩展程序”窗口
👉启用“开发者模式”
👉点击加载解压后的扩展程序
👉把刚才那个文件夹拖进去
你会发现下面多了一个插件：
填写Cursor中的MCP配置
接着在cursor中部署这个mcp服务。
打开settings设置：
找到最右边的mcp，点击添加mcp配置。如下👇
{
"mcpServers": {
"browser-tools": {
"command": "npx",
"args": ["@agentdeskai/browser-tools-mcp@latest"],
"env": {
"BROWSER_TOOLS_HOST": "127.0.0.1",
"BROWSER_TOOLS_PORT": "3025"
}
}
}
}
如果你之前就在cursor上添加过mcp服务，需要把上面这段专属于browser-tools的单独带入进去，自己看见json头晕的话就直接让cursor出马给你在mcp.json文件里添加好。
把下面也做完后，你会发现有一个小绿点，就是安装成功了👇🏻
启动项目
想要彻底成功建立mcp，还需要启动服务。在cursor里直接ctrl+m唤起对话框，我们需要手动在cursor里启动服务。
注意顺序👇
先在curosr终端里，输入👇🏻
npx @agentdeskai/browser-tools-server
然后，接着cursor里新建一个终端，键入。
记住一定是在你新建的终端里去键入👇🏻
npx @agentdeskai/browser-tools-mcp
（为什么有不同的终端？不同的终端就像一个计算机大楼里的不同房间都可以通往核心功能，多开几个没关系，放心开）
检查Chrome是否正常工作
现在你需要做的是检查浏览器工具服务（Browser Tools Server）是否真的连接上了我们的mcp。
你想自动化操作哪个网页，就用Chrome打开这个网页。
注意：一但选定，不要切换网页，因为你切换到哪个网页标签，mcp就会解析哪个。
Windows用户按F12，苹果用户按Fn+F12点击控制台，然后往右看，有一个>>点开，然后选择browser-tools。
就可以看到browsertool正在尝试连接到服务……
成功连接后是这样👇最上面有个🟢绿点 显示
Connected to browser-tools-server
如果没有连接成功，显示failed，可以通过下面的auto和test进行自动测试。
如果还连不上，就回cursor里，务必按照上面的顺序，重新启动服务，或者通过和cursor对话，寻找问题 。
Cursor里调用mcp
我让cursor跟着前面提到的功能表👇🏻，依次运行了一下对应mcp功能。
case 1 小红书控制台报错分析
我让它做小红书页面控制台错误分析，控制台错误如下，
它回复我的内容是：
# 小红书页面控制台错误分析
通过分析控制台日志和错误信息，我发现当前小红书页面存在两个控制台错误：
## 1. 异步消息通道错误
错误信息
Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received
错误时间：1746182294333（2025-05-02 18:24:54）
错误类型：React渲染错误
技术背景：
React使用"Hydration"过程将服务端渲染(SSR)的HTML与客户端React组件连接
当服务端渲染的HTML与客户端渲染结果不匹配时发生此错误
可能原因：
服务端与客户端使用不同的数据渲染同一组件
时间或日期等动态内容在服务端与客户端渲染结果不同
浏览器特定的API或环境检测在两端结果不一致
用户特定数据（如登录状态）在两端不同步
影响程度：中等
React会尝试修复不匹配，但可能导致UI闪烁或交互不一致
case 2 全套分析
我让它分析我自己的主页，一个超简单的html。
https://staraiwork.cn/
它评估的内容如下👇
快去体验下一下吧~有啥超级省事的case记得我哦~
我是阿星，我们下期再见！
往期文章：
欢迎加入 MCP 技术社区！与志同道合者携手前行，一同解锁 MCP 技术的无限可能！
更多推荐
12
0- 0
已为社区贡献1条内容
所有评论(0)