Cherry studio 配 TaoToken：Chrome DevTools MCP 浏览器自动化配置骨架

1. 为什么要在 Cherry studio 里接 Chrome DevTools MCPCherry studio 本身是个多模型桌面客户端很多人拿它当聊天窗口用但它其实支持 MCPModel Context Protocol服务器注册。把 Chrome DevTools MCP 挂进去之后模型就能直接调用浏览器工具打开页面、点按钮、填表单、截图、读控制台日志。对做前端调试、自动化测试、爬取渲染后页面的人来说这比手动复制粘贴 DOM 高效得多。Chrome DevTools MCP 是官方维护的一个 MCP 服务通过 CDPChrome DevTools Protocol跟本地 Chrome 通信。它不依赖任何特殊网络环境只要本机装了 Chrome 和 Node.js 就能跑。适合三类人一是想用自然语言驱动浏览器做重复操作的前端二是需要让模型看到真实渲染结果的测试同学三是想把浏览器能力接进 Agent 工作流的开发者。我这次的做法是模型 API 走 TaoToken 的统一通道MCP 服务本地起两者互不干扰。这样换模型不用改 MCP 配置换 MCP 也不用动 Key。下面从环境准备到验证截图一步步给可复制的骨架。2. TaoToken 前置拿到统一 Key 和接入地址TaoToken 在这里的角色是模型侧的入口。你不需要为每个模型单独申请 Key一个统一 Key 就能在 Cherry studio 里切换不同模型。对 MCP 场景来说模型负责“决策调用哪个工具”TaoToken 负责把请求稳定送到模型MCP 负责真正操作浏览器三层职责清晰。先到控制台创建 API Key。打开 https://taotoken.net/console 登录后在 API Keys 页面新建一个复制出来保存好后面填进 Cherry studio 的模型服务配置里。接入地址用 https://taotoken.net/api 注意这个地址不带任何查询参数直接填在 Base URL 位置即可。注意Key 只在创建时完整显示一次建议先存到密码管理器。如果泄露直接在控制台吊销重建不要复用。模型选择上浏览器自动化对模型的工具调用能力有要求建议选支持 function calling 的模型。你可以在 https://taotoken.net/models 看当前可用的模型列表挑一个上下文够大、工具调用稳的。我实测下来带工具调用标记的模型在 MCP 场景里表现更一致不会出现“说了要截图但没真的调工具”的情况。如果你后面要长期跑编码或 Agent 任务可以了解下 Coding Plan它更适合高频调用场景https://taotoken.net/coding-plan 。不过本篇只做浏览器自动化验证用按量 Key 就够了。3. 可复制配置settings.json 与 config.toml 骨架Cherry studio 的 MCP 配置在不同版本里可能落在 settings.json 或 config.toml两者结构类似我都给出来你按自己客户端实际读取的文件填。先确认 Node.js 和 npm 可用因为 chrome-devtools-mcp 是通过 npx 拉起的node -v npm -v如果版本过低npx 可能拉不起最新包建议 Node 18 以上。接着是 MCP 服务注册。JSON 格式的 settings.json 骨架如下{ mcpServers: { chrome-devtools: { command: npx, args: [-y, chrome-devtools-mcplatest], env: { CHROME_DEBUG_PORT: 9222 } } } }如果你用的是 TOML 格式的 config.toml等价写法是[mcpServers.chrome-devtools] command npx args [-y, chrome-devtools-mcplatest] [mcpServers.chrome-devtools.env] CHROME_DEBUG_PORT 9222两个配置里的关键点command 必须是 npxargs 里的 -y 表示自动确认安装chrome-devtools-mcplatest 保证拉到最新版。env 里的端口要和后面启动 Chrome 时用的调试端口一致我这里统一用 9222。模型服务那边在 Cherry studio 的设置里新增一个 OpenAI 兼容的服务Base URL 填 https://taotoken.net/api API Key 填刚才创建的那串模型名按你选的填。保存后先点一下测试连接能列出模型就说明模型侧通了。4. 启动 Chrome 调试端口并验证连通MCP 服务要操作浏览器前提是 Chrome 以调试模式启动并且暴露 CDP 端口。Windows 下可以这样起C:\Program Files\Google\Chrome\Application\chrome.exe --remote-debugging-port9222 --user-data-dir%TEMP%\chrome-profile-stablemacOS 或 Linux 换成对应路径即可核心是 --remote-debugging-port9222 和独立的 --user-data-dir。用独立用户目录是为了不污染你日常的浏览器配置也避免已有 Chrome 实例占用端口导致新参数不生效。启动后在浏览器地址栏访问http://127.0.0.1:9222/json如果返回一段 JSON里面有 webSocketDebuggerUrl 字段说明 CDP 端口通了。这一步很关键MCP 服务就是通过这个 WebSocket 跟浏览器对话的。如果返回空或报错先检查是不是已有 Chrome 在跑把旧实例全部关掉再重试。然后回到 Cherry studio重新加载 MCP 配置。正常情况下工具列表里会出现 chrome-devtools 相关的一批工具比如导航、截图、点击、读取控制台等。如果工具没拉出来看客户端的 MCP 日志通常是 npx 首次下载包比较慢等一会儿再刷新。5. 用一次导航加截图验证整条链路工具拉出来后直接在对话里让模型执行一个最小动作组合打开一个页面并截图。比如输入“用 chrome-devtools 打开 https://example.com 并截图保存”。模型会先调用导航工具再调用截图工具。如果你想手动确认工具是否真的生效可以看 MCP 日志里有没有对应的调用记录以及浏览器是否真的跳转到了目标页面。截图工具一般会返回图片数据或保存路径Cherry studio 里能直接预览。这一步能跑通说明三层都通了TaoToken 把请求送到了模型模型正确选择了 MCP 工具MCP 通过 CDP 控制了浏览器。后面你要做更复杂的操作比如填表单、抓渲染后的 DOM、监听网络请求都是在这个骨架上加工具调用而已。提示验证阶段先用简单静态页面别一上来就开复杂 SPA减少变量方便定位问题出在哪一层。6. 本篇常见错排查npx 拉包失败或超时多半是 npm 源或缓存问题。可以先手动跑一次npx -y chrome-devtools-mcplatest --help看能否正常下载。能跑通再回 Cherry studio 加载配置。CDP 端口连不上检查 Chrome 是否真的带 --remote-debugging-port 启动。如果之前已经开过 Chrome新参数不会生效必须完全退出所有 Chrome 进程再启动。访问 http://127.0.0.1:9222/json 返回 JSON 才算成功。工具列表为空确认 settings.json 或 config.toml 的路径和格式正确JSON 不能有多余逗号TOML 的层级不能写错。改完配置要重启 Cherry studio 或重新加载 MCP。模型不调用工具换一个支持 function calling 的模型试试。有些模型在对话里会“假装”调用了工具实际没发工具调用请求这种在 MCP 场景里会表现为浏览器毫无反应。截图返回空白页面可能还没加载完就截了。可以让模型在导航后加一个等待或者先读取页面标题确认加载完成再截图。排查顺序建议从下往上先确认 Chrome CDP 通再确认 MCP 工具能列出最后确认模型会调工具。哪一层断了就修哪层别混在一起猜。7. 后续接入与资源入口整条链路跑通后你可以把模型侧和 MCP 侧分开维护模型 Key 和地址在 TaoToken 控制台管理MCP 配置在 Cherry studio 本地管理。需要新建或轮换 Key 时走 https://taotoken.net/api-keys 接入参数和兼容说明看 https://taotoken.net/doc 想先在网页里试模型对话再落到配置里可以用 https://taotoken.net/models 里的对话入口。如果你要长期跑编码或 Agent 类任务Coding Plan 会比按量更省心https://taotoken.net/coding-plan 。浏览器自动化这块先把导航加截图这个最小闭环跑稳再往上叠点击、填表、网络监听出问题时也更容易定位是哪一层的事。