文档浏览器 (Docs Browser)

通过 Chrome DevTools MCP 自动浏览官方文档，查找并提取用户需要的内容。

工作流程

1. 解析用户请求

从用户输入中提取：

•文档URL: 用户提供的官方文档地址
•搜索关键词: 用户想要查找的内容

示例输入：

•/docs https://react.dev hooks → URL: react.dev, 关键词: hooks
•查一下Vue官方文档中的computed属性 → URL: vuejs.org, 关键词: computed
•在 https://nodejs.org/docs 查找 fs.readFile → URL: nodejs.org/docs, 关键词: fs.readFile

2. 打开文档页面

code

mcp__chrome-devtools__new_page(url: <文档URL>)

如果用户只提供了框架名称而非完整URL，使用常见官方文档地址：

•React: https://react.dev
•Vue: https://vuejs.org
•Angular: https://angular.dev
•Node.js: https://nodejs.org/docs
•TypeScript: https://www.typescriptlang.org/docs
•MDN: https://developer.mozilla.org

3. 获取页面快照

code

mcp__chrome-devtools__take_snapshot()

分析页面结构，识别：

•搜索框元素
•导航菜单
•侧边栏目录
•主要内容区域

4. 使用文档搜索功能

大多数官方文档都有搜索功能，优先使用：

code

# 定位搜索框
mcp__chrome-devtools__take_snapshot() # 获取元素uid
mcp__chrome-devtools__click(uid: <搜索按钮或搜索框uid>)
mcp__chrome-devtools__fill(uid: <搜索输入框uid>, value: <搜索关键词>)
mcp__chrome-devtools__press_key(key: "Enter")

5. 浏览搜索结果

code

mcp__chrome-devtools__take_snapshot() # 获取搜索结果
mcp__chrome-devtools__click(uid: <最相关结果的uid>) # 点击进入详情页

6. 提取内容

到达目标页面后：

code

mcp__chrome-devtools__take_snapshot() # 获取完整页面内容

如果内容较长，可以滚动查看：

code

mcp__chrome-devtools__press_key(key: "PageDown")
mcp__chrome-devtools__take_snapshot()

7. 整理并返回结果

将提取的内容整理为清晰的格式返回给用户，包括：

•相关API/功能的说明
•代码示例
•重要注意事项
•文档原始链接

常用操作参考

页面导航

code

mcp__chrome-devtools__navigate_page(type: "back")  # 返回上一页
mcp__chrome-devtools__navigate_page(type: "forward")  # 前进
mcp__chrome-devtools__navigate_page(type: "reload")  # 刷新

等待页面加载

code

mcp__chrome-devtools__wait_for(text: <期望出现的文本>)

截图保存

code

mcp__chrome-devtools__take_screenshot(filePath: "./docs-screenshot.png")

执行JavaScript提取内容

code

mcp__chrome-devtools__evaluate_script(function: "() => { return document.querySelector('article').innerText }")

处理常见情况

搜索框难以定位

很多网站使用快捷键打开搜索：

code

mcp__chrome-devtools__press_key(key: "Control+k")  # 或 "Meta+k" (Mac)
mcp__chrome-devtools__press_key(key: "/")  # 部分网站使用 / 键

内容在iframe中

使用 mcp__chrome-devtools__list_pages() 查看所有页面，必要时切换。

需要滚动加载

code

mcp__chrome-devtools__press_key(key: "End")  # 滚动到底部
mcp__chrome-devtools__press_key(key: "Home")  # 滚动到顶部

弹窗/对话框

code

mcp__chrome-devtools__handle_dialog(action: "dismiss")  # 关闭弹窗

示例：查询React Hooks文档

code

1. mcp__chrome-devtools__new_page(url: "https://react.dev")
2. mcp__chrome-devtools__take_snapshot()  # 找到搜索按钮
3. mcp__chrome-devtools__press_key(key: "Meta+k")  # 打开搜索
4. mcp__chrome-devtools__take_snapshot()  # 获取搜索框uid
5. mcp__chrome-devtools__fill(uid: "xxx", value: "useState")
6. mcp__chrome-devtools__press_key(key: "Enter")
7. mcp__chrome-devtools__take_snapshot()  # 查看搜索结果
8. mcp__chrome-devtools__click(uid: "yyy")  # 点击第一个结果
9. mcp__chrome-devtools__take_snapshot()  # 提取内容

注意事项

•始终先用 take_snapshot() 了解页面结构再进行操作
•等待页面加载完成后再进行下一步操作
•如果操作失败，尝试刷新页面或使用替代方法
•保持操作链路简短，避免不必要的页面跳转