1. 为什么要在 Cursor 里折腾 browser-tools-mcp如果你正在用 Cursor 写前端或者调试网页大概率遇到过这种场景让 AI 帮忙看下当前页面的控制台报错它只能干巴巴地回你一句「我无法访问你的浏览器」。browser-tools-mcp 就是来解决这个问题的——它是一套基于 MCP 协议的浏览器工具链能让 Cursor 这类支持 MCP 的编辑器直接读取浏览器标签页、抓取控制台日志、执行页面脚本、跑 Lighthouse 审计。整套东西由三个部分组成browser-tools-mcp是装进 IDE 的 MCP 服务器负责和编辑器通信browser-tools-server是本地 Node 中间件负责收集日志和调度复杂任务chrome-extension是浏览器扩展负责在页面里实际执行动作。三者配合AI 才能真正「看见」你的浏览器。这篇教程面向的是想在自己机器上完整跑通这套链路的人尤其是用 Cursor 的开发者。我会从 Node 环境检查开始一步步走到扩展加载、双服务启动、settings.json 配置最后把模型请求统一指向 TaoToken 的 API 通道让整条链路既跑得通又跑得稳。全程命令可直接复制配置骨架也给全踩过的坑我会在排障章节里逐条列出来。2. 前置准备Node、npm 与 TaoToken 通道2.1 Node 版本与 npm 依赖browser-tools-mcp 对 Node 版本有硬性要求v16.0.0 及以上推荐用 LTS 版本比如 v18.x 或 v20.x。版本太低会在npm install阶段报语法错误别问我怎么知道的。先确认本机版本node -v npm -v如果版本不达标去 Node 官网下 LTS 包重装即可。装完后建议把 npm 也升一下npm install -g npmlatest2.2 为什么要把模型请求指向 TaoTokenbrowser-tools-mcp 本身不绑定任何模型它只负责把浏览器能力暴露给 Cursor。真正干活的是 Cursor 背后的模型。如果你希望这套链路里的模型调用走统一通道、方便管理 Key 和用量可以把 Cursor 的模型请求指向 TaoToken 的 API 地址。TaoToken 提供兼容 OpenAI 风格的接口API 基址是https://taotoken.net/api。你需要在控制台创建一个 API Key然后把它填到 Cursor 的模型配置里。这样 browser-tools-mcp 抓到的页面信息、日志、审计结果都会通过你配置的模型通道来处理整条链路可控。注册和拿 Key 的入口在这里https://taotoken.net/api-keys 。拿到 Key 之后先放一边后面配置 Cursor 时要用。3. 全链路配置从 clone 到 settings.json3.1 拉取仓库并认识三个目录先把仓库拉到本地git clone https://github.com/AgentDeskAI/browser-tools-mcp.git cd browser-tools-mcp拉下来之后你会看到三个文件夹各自职责不同目录作用运行方式browser-tools-mcp装进 IDE 的 MCP 服务器与扩展和 server 通信npm run startbrowser-tools-server本地 Node 中间件收集日志、调度任务npm run startchrome-extension浏览器扩展在页面里执行实际动作拖入扩展管理页这三个缺一不可。很多人只跑 mcp 不跑 server结果 Lighthouse 审计和高阶命令全部失效就是因为少了后端调度层。3.2 安装并启动 browser-tools-server先进 server 目录装依赖并启动cd browser-tools-server npm install npm run start启动成功后终端会提示监听端口默认 3025 附近。这个窗口别关它是常驻服务。3.3 安装并启动 browser-tools-mcp另开一个终端进 mcp 目录cd browser-tools-mcp npm install npm run start同样保持运行。到这里两个 Node 服务都起来了但浏览器那边还没接上。3.4 加载 chrome-extension打开 Chrome地址栏输入chrome://extensions右上角打开「开发者模式」。然后有两种方式加载扩展第一种是直接把chrome-extension文件夹拖拽到扩展管理页面第二种是点「加载已解压的扩展程序」选中chrome-extension文件夹。两种都行拖拽更快。加载完成后按 F12 打开开发者工具看扩展图标的状态绿色表示生效红色表示没连上。如果是红色先确认前面两个 Node 服务都在跑然后重启浏览器再试。3.5 在 Cursor 里配置 MCP 与模型通道打开 Cursor 的 MCP 配置文件通常在~/.cursor/mcp.json或项目级.cursor/mcp.json填入{ mcpServers: { browserTools: { command: npx, args: [agentdeskai/browser-tools-mcplatest], env: { BROWSER_TOOLS_MCP_PORT: 3025, BROWSER_TOOLS_MCP_HOST: localhost } } } }如果你更习惯用 TOML 风格的配置部分工具链支持骨架如下[mcpServers.browserTools] command npx args [agentdeskai/browser-tools-mcplatest] [mcpServers.browserTools.env] BROWSER_TOOLS_MCP_PORT 3025 BROWSER_TOOLS_MCP_HOST localhost接着配置 Cursor 的模型通道把请求指向 TaoToken。在 Cursor 的模型设置里选择 OpenAI 兼容模式Base URL 填https://taotoken.net/apiAPI Key 填你刚才在控制台创建的那个。保存后 Cursor 的模型调用就会走 TaoToken 通道。4. 验证请求确认 MCP 与扩展通信正常配置完别急着写代码先做三步验证。第一步确认两个 Node 服务还在跑。回到那两个终端窗口看有没有报错退出。第二步在 Cursor 里新建对话直接说使用 BrowserTools MCP 查看一下当前页面或者使用 mcp 查看一下当前页面如果配置正确Cursor 会自动调用 browserTools 这个 MCP 工具返回当前浏览器标签页的标题、URL 和部分 DOM 信息。第三步验证日志抓取。在浏览器里打开一个有控制台输出的页面然后让 Cursor 抓取控制台日志用 BrowserTools 抓一下当前页面的 console 日志正常的话你会看到页面里的 console.log 内容被回传过来。这一步能过说明扩展、server、mcp 三者通信链路是通的。如果模型通道也配好了Cursor 处理这些页面信息时走的就是 TaoToken 的 API你可以在 TaoToken 控制台看到对应的调用记录。5. 本篇常见错误排查5.1 扩展图标是红色最常见的原因是两个 Node 服务没同时运行。browser-tools-mcp 和 browser-tools-server 必须都处于运行状态缺一个扩展就连不上。先确认两个终端窗口都还在跑npm run start然后重启浏览器。5.2 MCP 工具调用无响应先重启 Cursor再重启浏览器然后重新问一次。如果还是不行检查mcp.json里的端口是否和 server 实际监听端口一致。默认是 3025如果你改过 server 的端口这里也要同步改。5.3 npm install 报错大概率是 Node 版本太低。回到第 2 章确认版本v16 以下直接升级。另外如果公司网络有 npm 镜像限制可能需要配置 registry。5.4 为什么两个服务都要跑这是问得最多的。简单说browser-tools-mcp 是浏览器里的执行者负责落地 AI 指令browser-tools-server 是后端的指挥官负责调度复杂任务、管理会话状态、对接 Lighthouse 这类需要后端资源的审计。只跑 mcp高阶命令和跨会话状态会失效只跑 server所有依赖浏览器实时交互的功能全部瘫痪。两个一起跑前端交互能力和后端业务逻辑才形成完整闭环。5.5 模型请求失败如果你把 Cursor 模型通道指向了 TaoToken但调用报错先检查 API Key 是否填对、Base URL 是否是https://taotoken.net/api。Key 可以在 https://taotoken.net/api-keys 重新生成。接入细节可以参考文档https://taotoken.net/doc 。6. 把通道固定下来后续少折腾整套链路跑通之后日常使用其实很简单两个终端窗口挂着服务浏览器扩展保持绿色Cursor 里正常对话就行。真正容易出问题的是环境变动——比如 Node 升级、端口被占、Key 过期。我的建议是把 TaoToken 的 Key 和 Base URL 固定写进 Cursor 配置别每次手动改。如果你后续要长期跑编码任务或者 Agent 流程可以考虑用 Coding Plan 把模型调用和额度管理统一起来https://taotoken.net/coding-plan 。需要临时验证模型效果时直接用模型对话页面测一下https://taotoken.net/models 。配置这件事一次做对后面就只剩用。browser-tools-mcp 的价值在于让 AI 真正接入你的浏览器现场而 TaoToken 的价值在于让这条链路里的模型调用可控可查。两者接上Cursor 才算真正长出了「眼睛」。
企业数字化 ERP 产品动态
相关推荐
让 AI 帮我部署网站，太方便了！TaoToken 统一 Key 接入 Cline 实战 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 19:25:48
Windows OpenClaw 一键部署教程：TaoToken 统一 Key 接入与图形化配置全流程 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/27 19:25:42
网站备案怎么那么麻烦，老手教你搞定性能优化 网站备案怎么那么麻烦，老手教你搞定性能优化 自己不会代码想做网站，结果卡在备案这一步，心态崩了？别急，这坑我踩过，你也别慌。 很多老板觉得备案是 bureaucratic… · 2026/9/27 19:58:37
nacos 增加windows 监控 1.NSClient - ERROR: Invalid password. vi commands.cfg找到 check_nt 修改密码# check_nt command definitiondefine command{command_name check_ntcommand_line $USER1$/check_nt -H $HOSTADDRESS$ -p 12489 -v $ARG1$ $ARG2$ -s redhat}2.修改nsclient配置文件增加密… · 2026/9/27 19:58:37
嵌入式c语言编程模块源文件和头文件的编写顺序 我在文章“嵌入式模块化编程降低耦合的有效手段”中提到活用static关键字是减少模块与模块之间耦合的重要手段。那么就存在一个问题，编写模块源文件和头文件的时候，是先写头文件内容还是先写源文件内容呢？
我以前的写法： 首先创建… · 2026/9/27 19:58:31
医院业态多业态园区的分层计量改造实战 本文介绍医院能耗的三层计量改造思路：按科室分表定位浪费，院区总表到楼栋再到设备逐级对账，公区与医疗负荷分开挂表，改造按片区推进不停业，并附园区对比与常见问答。关键信息摘要
医院能耗峰谷差异大，按科室… · 2026/9/27 19:58:25
基于图神经网络的物联网固件漏洞静态挖掘技术方案 上 基于图神经网络的物联网固件漏洞静态挖掘技术方案—— 从 ACFG 特征提取到跨架构相似性检测的完整实践路径摘要随着物联网设备的爆发式增长，固件安全问题已成为网络空间安全的重点与难点。本方案面向多架构物联网 ELF 固件，提出一套以静态分析为基础、以… · 2026/9/27 19:58:25
你对稿费极致渴望，钱才能进你口袋 独孤做AI供稿有1年多。
见证过太多学员的崛起。
他们之所以能赚到稿费，拿到结果。
都是对稿费有极度的渴望。
渴望到，放下工作，就在想去链接渠道商，去接单。
接到单子，怎么优化做稿路径，怎么提高效率。… · 2026/9/27 19:58:19
MATLAB雷达信号脉冲压缩仿真：LFM线性调频、匹配滤波与距离分辨率实现 简介：这套Matlab仿真工具完整呈现雷达信号脉冲压缩过程，从线性调频（LFM）信号生成、目标回波仿真到匹配滤波压缩处理均有可运行代码支撑，面向电子信息工程、计算机、数学等专业学生，适用于课程设计、期末大作… · 2026/9/27 0:00:01
汕头网站建设制作厂家避坑指南：5大注意事项救急 汕头网站建设制作厂家避坑指南：5大注意事项救急 改个需求建站公司拖一周，这种憋屈事我见得太多了。 很多汕头老板找本地建站团队，签合同前看着方案挺美，一上线就变脸。 今天不聊虚的，直接拆解找 汕头网站建设制作厂家 时的5个核心 注意事项… · 2026/9/27 0:00:01
多模态虚假新闻检测实战：BERT+ResNet双塔与对比学习 简介：基于PyTorch的多模态虚假新闻检测项目完整代码包，面向自然语言处理与计算机视觉交叉方向的开发者、科研人员及毕业设计选题者，解决社交媒体中文本与图像联合识别虚假新闻的问题。系统以BERT预训练模型提取文本语义特征，以Res… · 2026/9/27 0:00:01
MATLAB雷达信号脉冲压缩仿真：LFM线性调频、匹配滤波与距离分辨率实现 简介：这套Matlab仿真工具完整呈现雷达信号脉冲压缩过程，从线性调频（LFM）信号生成、目标回波仿真到匹配滤波压缩处理均有可运行代码支撑，面向电子信息工程、计算机、数学等专业学生，适用于课程设计、期末大作… · 2026/9/27 0:00:01
汕头网站建设制作厂家避坑指南：5大注意事项救急 汕头网站建设制作厂家避坑指南：5大注意事项救急 改个需求建站公司拖一周，这种憋屈事我见得太多了。 很多汕头老板找本地建站团队，签合同前看着方案挺美，一上线就变脸。 今天不聊虚的，直接拆解找 汕头网站建设制作厂家 时的5个核心 注意事项… · 2026/9/27 0:00:01
多模态虚假新闻检测实战：BERT+ResNet双塔与对比学习 简介：基于PyTorch的多模态虚假新闻检测项目完整代码包，面向自然语言处理与计算机视觉交叉方向的开发者、科研人员及毕业设计选题者，解决社交媒体中文本与图像联合识别虚假新闻的问题。系统以BERT预训练模型提取文本语义特征，以Res… · 2026/9/27 0:00:01
