Agent 终于能开浏览器了！Chrome DevTools MCP 接入全解析

大家好，我是二哥呀。

做了联网搜索，做了 MCP，我发现 PaiCLI 还有一个问题，Agent “看不见”一些固有生态的内容，比如说微信的内容。

直接用 web_fetch 去读微信的内容，是读不到的，因为微信生态的内容，外部的搜索引擎无能为力。

还有一些动态渲染的网页内容，抓回来的 HTML 里几乎没有内容。

以及想让 Agent 填表单、截图、看看控制台报错等，更是想都别想。

这一期，我们来接入 Google 官方的 Chrome DevTools MCP，让 PaiCLI 从“能调工具的 Agent”进化成“能开浏览器的 Agent”。

能导航页面、点击元素、填表单、拿 DOM 快照、看网络请求。

看完这一篇，大家就会明白一套完整的浏览器接入方案是怎么设计的，从启动体验到人工审批，从提示词策略到多模态边界，每一步都有讲究。

有了 Chrome Devtools MCP 后，Agent 就可以主动 fallback 到浏览器 MCP：调 mcp__chrome-devtools__new_page 打开页面，等文章容器加载完，再调 take_snapshot 拿 DOM 文本快照，最后总结输出。

Agent 可以主动去打开浏览器，能力就有了大幅提升。

01、Chrome DevTools MCP 是什么

Chrome DevTools 是 Google 官方提供的一个 MCP 工具。

一共有 28 个工具，按功能分八类。

导航有 6 个：navigate_page 开链接、new_page 建新标签页、select_page 切换标签、close_page 关页面、list_pages 看开了哪些标签、wait_for 等指定元素或文本出现。

模拟用户动作有：click 点元素、fill 填单个输入框、fill_form 一次性填整个表单、type_text 模拟键盘输入、press_key 按快捷键、hover 悬停、drag 拖拽、handle_dialog 处理弹窗、upload_file 传文件。

还有 take_snapshot 拿 DOM 文本、take_screenshot 截图、evaluate_script 执行 JavaScript、list_console_messages 看浏览器控制台报错等等。

为什么选官方的 Chrome DevTools MCP，而不是 Playwright 或者 Puppeteer？

三个原因。

第一，Google 官方出品，不需要我们再维护一套浏览器驱动。

第二，支持 --isolated=true 模式，每次启动用临时 user-data-dir，不占用用户的日常 Chrome profile。

第三，原生支持 --browser-url 参数，可以复用已打开的 Chrome，为后面的 CDP 会话复用打下基础。

02、CDP 原理与消息流转

Chrome DevTools MCP 能操控浏览器，靠的是 CDP 协议。

CDP 全称 Chrome DevTools Protocol，是 Chromium 团队提供的一套远程调试协议。

我们平时在 Chrome 里按 F12 打开开发者工具，DevTools 面板和浏览器之间通信用的就是这套协议。只不过 DevTools 面板是给人用的，而 CDP 是给应用程序用的，比...