MCP：浏览器自动化

MCP：浏览器自动化 MCP：浏览器自动化 Modified September 15, 2025 （为什么有不同的终端？不同的终端就像一个计算机大楼里的不同房间都可以通往核心功能，多开几个没关系，放心开）检查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 小红书控制台报错分析我让它做小红书页面控制台错误分析，控制台错误如下，它回复我的内容是： Code block Plain Text 小红书页面控制台错误分析通过分析控制台日志和错误信息，我发现当前小红书页面存在两个控制台错误： 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记得我哦我是阿星，我们下期再见！（为什么有不同的终端？不同的终端就像一个计算机大楼里的不同房间都可以通往核心功能，多开几个没关系，放心开）检查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 小红书控制台报错分析我让它做小红书页面控制台错误分析，控制台错误如下，它回复我的内容是： case 2 全套分析我让它分析我自己的主页，一个超简单的html。 https://staraiwork.cn/ 它评估的内容如下👇 快去体验下一下吧有啥超级省事的case记得我哦我是阿星，我们下期再见！原文链接：https://mp.weixin.qq.com/s/dTGkgNDWhf0qrWErM4bnSQ 大家好，我是阿星👋！最近大火的MCP让更多人get到了AI自动化的神奇。我发现一款很实用的浏览器MCP：AgentDesk——Browser Tools，不但能让小白get一下神奇之处，还能帮到开发同学。比如——自动截图咔咔就给你截图到本地文件夹啦～再比如—— 快速检查和提取信息（如元素、属性、文本内容）不用F12打开控制台去点元素、手动找；模拟执行操作，比如重复提交表单提交，自动化测试……（来自 @Thinkdu老师）从阿星一个小白的角度来说，平常都是自己手动复制项目报错信息到cursor，现在可以自动拿到它的技术栈分析了。 cursor感知到我的项目上下文后，我直接在cursor里二次编程，不用一遍遍给cursor传话了。它的功能不止于此，可以运用于专业开发👇🏻也很适合技术小白加深对技术栈的理解。每个功能对应的提问方式在github里，可以直接模仿。我们一起来看看怎么安装吧～下载 AgentDesk MCP 找到官直接下载他们已经上架的chrome插件。点击右侧的installation然后点击click here。官网地址是：https://browsertools.agentdesk.ai/installation 也可以跳转到github👇小白直接点击绿色按钮下载到本地即可。也可以直接克隆项目到本地：记住你的下载位置，一会儿还要回来拖拽到浏览器里。接着打开chrome浏览器，安装 Chrome 扩展程序。打开“管理扩展程序”窗口 👉启用“开发者模式” 👉点击加载解压后的扩展程序 👉把刚才那个文件夹拖进去你会发现下面多了一个插件：填写Cursor中的MCP配置接着在cursor中部署这个mcp服务。打开settings设置：找到最右边的mcp，点击添加mcp配置。如下👇 如果你之前就在cursor上添加过mcp服务，需要把上面这段专属于browser tools的单独带入进去，自己看见json头晕的话就直接让cursor出马给你在mcp.json文件里添加好。把下面也做完后，你会发现有一个小绿点，就是安装成功了👇🏻 启动项目想要彻底成功建立mcp，还需要启动服务。在cursor里直接ctrl+m唤起对话框，我们需要手动在cursor里启动服务。注意顺序👇 先在curosr终端里，输入👇🏻 然后，接着cursor里新建一个终端，键入。记住一定是在你新建的终端里去键入👇🏻