1. 为什么要在 Cherry studio 里接 Chrome DevTools MCP
Cherry studio 本身是个多模型桌面客户端，很多人拿它当聊天窗口用，但它其实支持 MCP（Model Context Protocol）服务器注册。把 Chrome DevTools MCP 挂进去之后，模型就能直接调用浏览器工具：打开页面、点按钮、填表单、截图、读控制台日志。对做前端调试、自动化测试、爬取渲染后页面的人来说，这比手动复制粘贴 DOM 高效得多。
Chrome DevTools MCP 是官方维护的一个 MCP 服务，通过 CDP（Chrome 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-mcp@latest"], "env": { "CHROME_DEBUG_PORT": "9222" } } } }如果你用的是 TOML 格式的 config.toml，等价写法是：
[mcpServers.chrome-devtools] command = "npx" args = ["-y", "chrome-devtools-mcp@latest"] [mcpServers.chrome-devtools.env] CHROME_DEBUG_PORT = "9222"两个配置里的关键点：command 必须是 npx，args 里的 -y 表示自动确认安装，chrome-devtools-mcp@latest 保证拉到最新版。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-port=9222 --user-data-dir="%TEMP%\chrome-profile-stable"macOS 或 Linux 换成对应路径即可，核心是 --remote-debugging-port=9222 和独立的 --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-mcp@latest --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 。浏览器自动化这块，先把导航加截图这个最小闭环跑稳，再往上叠点击、填表、网络监听，出问题时也更容易定位是哪一层的事。
