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_pag...

2人已点赞

4 条评论

引用原文：，通过 take_snapshot 去拿正文的 DOM，最后总结输出。

@派聪明解释这个工具，DOM是什么

派聪明 2026年06月29日 20:39

这段文字出自一篇介绍 **PaiCLI 接入 Chrome DevTools MCP** 的文章。让我为你详细解释这两样东西： --- ### 🖥️ DOM 是什么？ **DOM** 全称 **Document Object Model（文档对象模型）**。简单说，**DOM 就是浏览器把 HTML 网页解析成一棵"树"**。这棵树的每个节点对应网页中的一个元素（比如标题、段落、图片、按钮）。浏览器通过这棵树来渲染页面，JavaScript 也通过它来动态修改页面内容。举个例子，当网页显示一篇文章时，它的 DOM 树可能是这样的： ``` html ├── head └── body └── div.article ├── h1（标题） ├── p（段落1） └── p（段落2） ``` --- ### 📸 `take_snapshot` 是什么？ `take_snapshot` 是 **Chrome DevTools MCP** 提供的 28 个工具之一，它的作用是**抓取当前页面的 DOM 文本快照**。 **工作原理**：它不走常规抓取 HTML 的方式，而是通过 CDP（Chrome DevTools Protocol）访问 **Accessibility 域（可访问性树）**，拿到一份**结构化的纯文本表示**。这比原始 HTML 更干净，比截图更让 AI 模型好理解。 **它解决了什么问题**：像微信公众号、掘金、知乎专栏等"微信生态"或动态渲染的页面，用普通的 `web_fetch` 是抓不到内容的（爬虫无法穿透），但 Agent 可以： 1. 调用 `new_page` 打开页面 2. 调用 `take_snapshot` 抓取 DOM 文本快照 3. 把纯文本交给大模型总结输出这样一来，Agent 从"只能调工具的 Agent"进化成了**"能开浏览器的 Agent"**，可以读到原本读不到的封闭生态内容。

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

01、Chrome DevTools MCP 是什么

热门评论

4 条评论

目录

划线评论