Agent联网能力革命：web-access 如何让 AI 从搜索进化到浏览——TaoToken 统一 Key 接入 CDP 实战

1. 为什么你的 Agent 联网总卡在“搜索”这一步

如果你最近在用 Claude Code、Codex 或者自己搭的 Agent 做调研，大概率遇到过这种场景：让它去查一下某个平台的定价策略，它给你返回一段搜索引擎摘要，点进去发现关键信息在登录后才能看的页面里；让它去抓小红书某关键词下的讨论，它用 WebFetch 拉回来一堆混淆 JS，然后开始反复重试，最后给你一句“无法获取内容”。

这不是模型不够聪明，而是联网方式太原始。传统 Agent 联网的链路是“搜索 API → 拿摘要 → 拼结论”，本质上和你在搜索引擎里看快照没区别。遇到动态渲染、登录墙、反爬机制，这条路直接断掉。

web-access 这个 Skill 做的事情，是把 Agent 从“搜索”推到“浏览”。它底层用 Chrome DevTools MCP 打通 CDP（Chrome DevTools Protocol）通道，让 Agent 直接操控你日常用的 Chrome 浏览器——你登录过的账号、你浏览器里的 cookie、你本地的渲染环境，Agent 全都能复用。换句话说，你在 Chrome 里能看到的页面，Agent 通过 CDP 也能看到，而且能点击、滚动、提取、截图。

这篇文章聚焦一件事：怎么用 TaoToken 统一 Key 把 web-access + Chrome DevTools MCP 的 CDP 会话跑通。我会给出可复制的config.toml和settings.json骨架，然后带你做一次完整的验证请求，确认 Agent 真的能通过 CDP 打开页面并提取内容。目标是一次配置，后续复现浏览级联网。

适合谁看：已经在用 Claude Code 或类似 Agent 工具、想给 Agent 加上“真实浏览”能力的开发者；或者你正在做竞品调研、社媒监控、文档抓取这类需要登录态和动态渲染的任务，被 WebFetch 的空页面折磨过。

2. TaoToken 前置：统一 Key 与 CDP 通道的关系

在讲配置之前，先把两个概念理清楚，不然后面配的时候容易混。

TaoToken 在这里的角色是统一模型接入层。web-access 这个 Skill 本身不绑定特定模型，它需要调用 LLM 来做决策——判断当前任务该用 WebSearch、WebFetch 还是升级到 CDP 模式。这个决策调用需要一个模型 API Key。TaoToken 提供的就是这个统一 Key，你用它去调模型对话、coding plan 或者 API，不用在每个工具里分别配不同厂商的 Key。

CDP 通道则是另一条线。Chrome DevTools MCP 是一个 MCP Server，它暴露的是 CDP 的原子能力：创建标签页、执行脚本、截图、点击。web-access 在它之上加了决策层、站点经验积累和并行调度。所以你的配置实际上要打通两段：Agent 到模型的调用（走 TaoToken Key），Agent 到浏览器的调用（走 Chrome DevTools MCP + CDP）。

我试过把这两段分开配，结果 Agent 在需要升级到 CDP 的时候卡住，因为它不知道该调哪个模型来做“是否升级”的判断。统一 Key 的好处是，web-access 的决策层和最终的内容整理层都走同一个入口，配置简单，排障也简单。

你需要准备的东西：

• 一个 TaoToken 账号，拿到 API Key。入口在 API Keys 页面，地址是https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api_keys&utm_campaign=rewrite。
• 本地装好 Chrome，并且确认你的日常登录态在里面（比如你已经登录了小红书、微信公众号后台、公司内网等）。
• 一个支持 MCP 配置的 Agent 环境，比如 Claude Code 或者你自己搭的客户端。

注意：CDP 模式会复用你日常 Chrome 的登录态，这意味着 Agent 能访问你已登录的页面。建议在专用浏览器 profile 里操作，或者至少清楚当前 Chrome 里有哪些登录态。

3. 可复制配置：config.toml 与 settings.json 骨架

这一节是核心，直接给可复制的配置。分两个文件：config.toml管模型接入和 MCP Server 注册，settings.json管 Agent 侧的 Skill 和权限。

3.1 config.toml：注册 Chrome DevTools MCP 与模型入口

# config.toml # TaoToken 统一 Key 接入 + Chrome DevTools MCP 注册 [model] provider = "taotoken" api_base = "https://taotoken.net/api" api_key = "sk-your-taotoken-key-here" default_model = "claude-sonnet-4-20250514" [mcp_servers.chrome_devtools] command = "npx" args = [ "-y", "@anthropic-ai/chrome-devtools-mcp@latest", "--cdp-endpoint", "http://127.0.0.1:9222" ] env = { CHROME_CDP_PORT = "9222" } [web_access] enabled = true mode = "auto" # auto | search_only | cdp_only fallback_order = ["websearch", "webfetch", "cdp"] cdp_timeout_ms = 30000 max_parallel_subagents = 3

几个关键点解释一下。

api_base指向https://taotoken.net/api，这是 TaoToken 的 API 入口，不带任何多余参数。api_key换成你自己的。default_model按你实际能调的模型填。

mcp_servers.chrome_devtools这段是注册 Chrome DevTools MCP。--cdp-endpoint指向本地 Chrome 的调试端口 9222。这里有个前提：你的 Chrome 需要以调试模式启动，并且开放 9222 端口。启动命令在下一节给。

web_access.fallback_order定义了降级顺序：先 WebSearch，不行再 WebFetch，再不行升级到 CDP。这个顺序是 web-access 的核心设计——轻量方式能走就走轻量，省 token 也省时间。

3.2 settings.json：Skill 启用与权限控制

{ "skills": { "web-access": { "enabled": true, "cdp": { "endpoint": "http://127.0.0.1:9222", "reuse_existing_tab": true, "carry_login_state": true, "screenshot_on_error": true }, "site_patterns_dir": "./references/site-patterns", "parallel": { "enabled": true, "max_subagents": 3 } } }, "permissions": { "allow": [ "mcp__chrome_devtools__*", "skill__web_access__*" ], "deny": [ "mcp__chrome_devtools__evaluate_script_on_banking_sites" ] }, "model": { "provider": "taotoken", "api_key_env": "TAOTOKEN_API_KEY" } }

reuse_existing_tab: true是登录态复用的关键。它让 Agent 接管你当前打开的标签页，而不是新开一个无登录态的实例。carry_login_state: true确保 cookie 和 session 被带上。

site_patterns_dir指向站点经验目录。web-access 会把每次成功操作的经验写进去，比如小红书搜索框的 CSS 选择器、微信公众号内容渲染特性。下次遇到同网站直接复用路径，不用重新试。

permissions.deny里我加了一条示例，把涉及敏感操作的脚本执行禁掉。你可以按自己的安全边界调整。

3.3 启动 Chrome 调试模式

配置写好后，Chrome 需要以调试模式启动，开放 9222 端口。macOS 下命令：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \ --remote-debugging-port=9222 \ --user-data-dir="$HOME/.chrome-cdp-profile"

Windows 下：

"C:\Program Files\Google\Chrome\Application\chrome.exe" ^ --remote-debugging-port=9222 ^ --user-data-dir="%USERPROFILE%\.chrome-cdp-profile"

--user-data-dir指定一个独立 profile 目录。这样做的好处是和你日常 Chrome 隔离，避免调试端口影响正常使用；同时你在这个 profile 里登录一次目标网站，登录态就持久化了。

启动后访问http://127.0.0.1:9222/json/version，能看到返回的浏览器版本信息，说明 CDP 端口通了。

4. 验证请求：跑通一次 CDP 会话

配置和启动都完成后，做一次验证。目标是让 Agent 通过 CDP 打开一个需要动态渲染的页面，提取内容，确认整条链路通。

4.1 验证 CDP 端口连通性

先确认 MCP Server 能连上 CDP：

curl -s http://127.0.0.1:9222/json/version | jq .

返回类似：

{ "Browser": "Chrome/126.0.6478.127", "Protocol-Version": "1.3", "webSocketDebuggerUrl": "ws://127.0.0.1:9222/devtools/browser/xxxx" }

有webSocketDebuggerUrl就说明 CDP 通道可用。

4.2 发起一次浏览级请求

在 Agent 里输入任务：

用 web-access 打开 https://example.com，等待页面渲染完成，提取页面标题和第一段正文，并截图保存到 ./output/example.png

Agent 的执行链路应该是：先判断这个任务是否需要 CDP。example.com 是静态页面，理论上 WebFetch 就能搞定。为了强制走 CDP，你可以指定：

用 web-access 的 CDP 模式打开 https://example.com，提取标题和正文

预期结果：Agent 通过 Chrome DevTools MCP 创建一个标签页，导航到目标 URL，等待document.readyState === 'complete'，然后执行脚本提取document.title和正文文本，最后返回结构化结果。

4.3 验证登录态复用

这一步是重点。在你启动的调试 Chrome 里，手动登录一个需要授权才能看的页面，比如某个后台或者社媒。然后让 Agent 去访问：

用 web-access 打开 [你已登录的页面 URL]，提取页面上的用户昵称和第一条内容

如果 Agent 能拿到登录后才可见的内容，说明carry_login_state生效了。这一步跑通，后面做竞品调研、社媒监控就顺了。

4.4 验证并行子 Agent

web-access 支持多任务并行。试一个：

用 web-access 同时调研三个页面的标题和 meta description：[URL1] [URL2] [URL3]，每个页面一个子 Agent

主 Agent 会拆出三个子任务，各自管一个浏览器标签，最后整合输出。你可以在 Chrome 里看到多个标签页被同时操控。

5. 本篇常见错排查

配置过程中容易踩的坑，我列几个高频的。

CDP 端口连不上，报ECONNREFUSED 127.0.0.1:9222

原因通常是 Chrome 没有以调试模式启动，或者 9222 端口被占用。先检查 Chrome 启动命令里有没有--remote-debugging-port=9222。如果端口被占，换一个端口，同时改config.toml里的--cdp-endpoint和settings.json里的endpoint。

Agent 一直走 WebFetch，不升级到 CDP

检查web_access.mode是不是被设成了search_only。另外，fallback_order里 CDP 排在最后，只有前面都失败才会升级。如果你想强制走 CDP，把 mode 改成cdp_only，或者在任务里明确说“用 CDP 模式”。

登录态没带上，页面显示未登录

三个检查点：reuse_existing_tab是否为 true；carry_login_state是否为 true；你登录的网站是不是在启动调试 Chrome 时用的那个--user-data-dirprofile 里。如果你在另一个 Chrome 窗口登录，调试实例是看不到的。

MCP Server 启动失败，报找不到包

npx -y @anthropic-ai/chrome-devtools-mcp@latest需要网络能拉到 npm 包。如果卡住，先手动跑一次这个命令看报错。另外确认 Node.js 版本不要太低，建议 18 以上。

截图保存失败

检查./output/目录是否存在，Agent 不会自动创建目录。手动mkdir -p output一下。

模型调用报 401

TaoToken Key 没配对，或者环境变量TAOTOKEN_API_KEY没设置。检查config.toml里的api_key和settings.json里的api_key_env是否一致。如果用了环境变量方式，确认 shell 里export TAOTOKEN_API_KEY=sk-xxx已经生效。

排障相关的入口我放在这里：API Keys 管理在https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api_keys&utm_campaign=rewrite，接入文档在https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite。配置过程中遇到 Key 或接入问题，先看这两个页面。

6. 从搜索到浏览：把 CDP 会话用起来

配置跑通之后，web-access 的能力分三层可以逐步用起来。

基础层是 WebSearch + WebFetch + curl + Jina 转 Markdown。大多数任务先走这层，快且省。web-access 的贡献是加了调度决策——先用哪个、失败了怎么降级、什么情况换路。你不用手动判断，Agent 自己会选。

核心层是 CDP 浏览器直连。遇到动态渲染、登录墙、反爬机制，Agent 自动升级到这层。登录态天然携带，你在 Chrome 里登录的小红书、微信公众号、公司内网，Agent 直接就能用。这一步是“搜索”到“浏览”的分水岭。

效率层是多任务并行分治。多个调研目标拆给子 Agent 同时执行，主 Agent 只做整合输出。调研三个平台的时间和调研一个差不多。

如果你长期用 Agent 做编码或者跑自动化任务，可以考虑 Coding Plan 入口：https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding_plan&utm_campaign=rewrite。它适合需要持续调用模型、跑长任务的场景，比按次调 API 更划算。

想先验证模型对话效果，可以用模型对话入口：https://taotoken.net/chat?utm_source=taotoken_aicg_blog_end&utm_content=model_chat&utm_campaign=rewrite。控制台在https://taotoken.net/console?utm_source=taotoken_aicg_blog_end&utm_content=console&utm_campaign=rewrite，可以看调用量和余额。

最后给一个实用技巧：references/site-patterns/目录是 web-access 的经验积累机制。每次成功操作一个网站后，Agent 会把路径写进去。你可以手动维护这个目录，把常用网站的搜索框选择器、内容容器选择器、分页方式记下来。下次 Agent 遇到同网站，直接读经验文件，不用重新试错。这个目录越用越值钱，尤其是你经常调研的那几个平台。

配置一次，后面就是复现。CDP 会话跑通后，Agent 的联网能力从“查资料”变成“实地走访”，这个差距在需要登录态和动态渲染的任务里特别明显。