Lazy loaded image
MCP 案例 004|监控浏览器控制台输出
Words 246Read Time 1 min
2025-3-30
2025-5-23
type
status
date
slug
summary
tags
category
icon
password
视频内容
BrowserTools MCP 监控浏览器控制台输出_哔哩哔哩_bilibili
🗣️ 介绍browser-tools-mcp 是 AgentDeskAI 开发的一个 MCP(Model Context Protocol)服务器,专为 AI 编码助手(比如 Cursor)设计,通过 Chrome 扩展和本地 Node 服务器,捕获和分析浏览器数据(日志、网络请求、截图等),然后喂给 LLM,帮助开发者调试代码或与网页交互。它就像一个“浏览器侦探”,把前端运行时的细节交给 AI, 视频播放量 9818、弹幕量 3、点赞数 160、投硬币枚数 49、收藏人数 569、转发人数 53, 视频作者 二师兄说AI, 作者简介 专注于技术领域创作分享。商务合作:esx-ai,相关视频:Cursor+MCP自动控制浏览器,Cursor MCP神器:让你的编码效率提升10倍,自己动手写一个MCP Server,你就知道MCP怎么回事了,告别手动!MCP 自动化工作流,AI 提效 N 倍:Cline + MCP 保姆级教程,【什么MCP工具值得装?】Perplexity 最佳AI搜索引擎轻松接入Cursor,我用Cursor+两个MCP,复现了「AutoGLM沉思」(附完整流程+优劣对比),最强AI爬虫来了 AI操作浏览器 全自动完成任务,最近大火的MCP到底是个啥?一个比喻让你秒懂,Browser-Use WebUI 教程:轻松实现浏览器自动化操作 | 支持 Gemini / DeepSeek 等 AI 模型,AI时代网页自动化革命【Steel Browser】让Ai像人一样使用浏览器让Ai随心所欲,如虎添翼|浏览器API|Ai自动化|浏览器自动化|AI工具|神器
BrowserTools MCP 监控浏览器控制台输出_哔哩哔哩_bilibili
BrowserTools MCP 是一个基于 MCP 协议的浏览器监控与交互工具,赋能 AI 编程助手(如 Cursor、Claude)实时获取浏览器上下文,实现更智能的调试与自动化开发。
notion image

用到的模型:

  • Claude-3.7-sonnet

用到的 MCP Server


MCP 配置| Cursor|MAC

安装插件

  1. 下载代码
  1. 添加到 Chrome 插件
    1. notion image
  1. 效果
    1. notion image

启动 node 服务

notion image
MCP Server 配置

Cursor 配置

Add MCP Server

JSON 方式配置

  • 改 ~/.cursor/mcp.json:

效果

获取日志

prompt:查看下我当前的 Console Log 还有网络请求,现在好像有些异常
notion image

读取 Element 内容

prompt:获取当前鼠标 选择的 element , 换一个 icon
notion image

页面截图

prompt:对页面进行截图
notion image
 
上一篇
MCP 案例 005|让 AI 帮你处理监控异常
下一篇
MCP 案例 003|从设计到代码

Comments
Loading...