Chrome DevTools Web Research
Use chrome-devtools-mcp@latest through mcporter to drive Chrome, inspect real pages, and extract structured findings from dynamic websites.
Use MCP first by default. Do not wait for the user to remind you to use it.
For concrete failure wording and remediation paths, read references/troubleshooting.md.
User setup guidance
If the user needs to enable tab access in Chrome, give them this short setup flow:
- 1. Open INLINECODE3
- Toggle it on
- That’s it — the agent can now see the user’s tabs, cookies, logins, and page state through Chrome DevTools MCP
Explain plainly that this uses Chrome DevTools MCP under the hood and does not require a browser extension.
Quick start
- 1. Verify the MCP server is available.
- Open the target page with
chrome-devtools.new_page. - Take a snapshot and read visible structure from the accessibility tree.
- Navigate, click, fill, or switch tabs as needed.
- Cross-check important claims across multiple sources.
- Close pages promptly when a search leg is done.
- Summarize by source quality, not page volume.
Core commands
CODEBLOCK0
Workflow
Default operating rule
- 1. Always try MCP first with
mcporter + chrome-devtools. - Start searching proactively when the task implies browsing or research.
- Only stop to ask for help when Chrome-side access is broken.
- If setup/access fails, prompt the user to check Chrome, especially remote debugging / inspect availability, then retry.
- Close pages promptly when a page or search leg is no longer needed.
Failure and retry policy
Do not give up after the first MCP/browser failure.
Use references/troubleshooting.md for concrete error classes, user-facing wording, and remediation steps.
Follow this retry order strictly:
- 1. Retry the same MCP command once immediately if the error looks transient.
- If it still fails, run
mcporter list --output json again to verify chrome-devtools is still present. - If the server is present, retry with the smallest next step:
- reopen the page with
chrome-devtools.new_page, or
- re-run
chrome-devtools.take_snapshot, or
- re-issue a single click/fill/navigation action.
- 4. If Chrome itself appears unreachable, explicitly tell the user to check Chrome remote debugging / inspect access, then retry after that.
- If Google is blocked by captcha, consent wall, or anti-bot friction, do not stall. Record that Google was blocked and continue to X, then Reddit.
- Only stop the flow when the browser bridge is clearly broken and the user must intervene.
Practical rule: prefer one immediate retry + one environment re-check + one resumed attempt. Do not loop endlessly.
Default search strategy
If the user does not specify a website, platform, or search engine, follow this chain by default and in order:
- 1. Google first
- X second
- Reddit third
Treat this as the standard search chain, not an optional suggestion.
Required behavior for the chain:
- - Start with Google for broad discovery, main reporting chain, and likely primary/secondary sources.
- Then check X for live spread, fresh claims, quote-post chains, contradictions, and breaking updates.
- Then check Reddit for community source-tracing, surfaced links, and discussion that may reveal the original source trail.
- Do this proactively. Do not wait for the user to ask for each platform one by one.
- If the user only says “search this”, still run the chain unless they explicitly restrict scope.
- If one source is blocked, unavailable, or low value, continue to the next source instead of stopping.
Minimum acceptable default sequence:
- 1. Open Google results for the query
- Inspect at least one fresh snapshot there
- Open X search for the same query
- Inspect at least one fresh snapshot there
- Open Reddit search for the same query
- Inspect at least one fresh snapshot there
- Then summarize across the chain
If Google is blocked by a bot challenge or consent wall, report that friction, mark the Google leg blocked, and continue with X -> Reddit without waiting for user confirmation.
This default is for open-ended web research. If the user explicitly names another site, search engine, or platform, follow that instead.
1. Confirm MCP access
Run:
CODEBLOCK1
Expect a chrome-devtools server using a transport similar to:
CODEBLOCK2
If mcporter is missing, help the user install it first. If the chrome-devtools MCP server is missing, help the user configure or install it instead of stopping at a vague error.
Practical install/remediation flow:
CODEBLOCK3
If Chrome DevTools MCP is not available yet, guide the user to set up or reconnect the server used by mcporter, and then retry mcporter list until chrome-devtools appears.
Do not ask whether MCP should be used. If it is available, proceed immediately.
2. Open the target page directly
Prefer direct URLs whenever possible.
CODEBLOCK4
Use direct navigation for:
- - search result pages
- filtered URLs
- deep links to posts/articles/docs/issues
- dynamic app routes that are easier to open directly than to reproduce manually
If the site supports URL query parameters, prefer those over repeatedly editing fragile on-page controls.
2.5 Close pages when done
Do not leave research tabs open unnecessarily.
After extracting what you need from a page or after finishing a search leg, close that page promptly unless you still need it for comparison.
CODEBLOCK5
Practical rule:
- - open page
- inspect / interact / snapshot
- record findings
- close page when that leg is done
For multi-source research, keep only the minimum number of live pages needed.
3. Read the snapshot, not the pixels
Always pull a fresh snapshot after navigation or interaction:
CODEBLOCK6
Look for:
- -
article, link, button, heading, textbox, combobox, tab, INLINECODE25 - authors, timestamps, handles, titles, labels, counts
- outbound links to original reporting or docs
- signs of login walls, parity labels, sponsored content, or partial loads
Use screenshots only when layout itself matters.
4. Interact carefully
Use the smallest reliable action:
- -
navigate_page for direct URL changes - INLINECODE27 for tabs, filters, menus, pagination
- INLINECODE28 +
press_key for search boxes and forms - INLINECODE30 if multiple tabs/pages are open
After each meaningful state change, take another snapshot.
5. Separate source quality
Group findings into buckets such as:
- - Primary / official: original publisher, official docs, org pages, first-party dashboards
- Secondary reporting: media, analysts, aggregator accounts citing a source
- Tertiary chatter: comments, fan accounts, reposts, AI replies, unsourced claims
Repeated copies of the same claim count as one claim stream, not multiple confirmations.
6. Cross-check outside the active page
If the user wants stronger confidence, combine browser MCP findings with other methods:
- -
web_search for discovery, source expansion, and finding external reporting - INLINECODE32 for automatically retrieving readable page content when a page URL appears and lightweight extraction is enough
- INLINECODE33 for parallel page inspection when helpful
- INLINECODE34 as a fallback when fetch-style extraction is unavailable or insufficient
Use the browser for live state and interaction. When the task surfaces normal webpage links, prefer web_fetch first for readable extraction; fall back to curl when needed for raw retrieval or custom parsing.
7. Write the summary
Use this structure when the page contains conflicting claims:
- - Current best answer
- What the site/page says
- What other sources say
- Where the disagreement is
- Most credible sources
- Confidence / caveats
Good phrasing:
- - "The live page currently shows X, while secondary reporting is pushing Y."
- "Most posts trace back to the same reporting chain, so treat them as one rumor stream."
- "The browser-visible evidence supports A, but confirmation from a primary source is still missing."
Site-specific notes
Social platforms
- - Use platform-native filters like Top, Latest, People, Media, subreddit sorting, or thread sorting to separate dominant narrative from fresh chatter.
- Check for parody/account labels before citing.
- Treat quote-post chains, repost storms, and copied Reddit comments as propagation, not independent sourcing.
- AI assistant replies inside a platform can help map rumor themes, but they are not primary evidence.
- On Reddit, prioritize posts that link back to original reporting, comments that add sourcing context, and community threads where multiple users are tracing the same source chain.
Search engines
- - Expect bot challenges or captchas.
- If blocked, pivot to another source rather than pretending results were retrieved.
Docs / dashboards / web apps
- - Prefer direct deep links.
- Snapshots are often enough for structured extraction.
- If content is hidden behind menus, open one section at a time and resnapshot.
Practical notes
- - UI language may vary; rely on structure, URLs, and recognizable entities more than labels alone.
- If the page is still loading, wait briefly and snapshot again.
- If login, subscription, or anti-bot friction appears, report the limitation plainly.
- When normal webpage links appear during research, automatically try
web_fetch first for fast readable extraction; if that is unavailable or not enough, fall back to curl. - When the page alone is not enough, expand outward with
web_search to find corroborating coverage, official announcements, or the original reporting chain. - If the user is not set up yet, prefer giving them the shortest enablement path first: turn on Chrome remote debugging access, then verify
mcporter + chrome-devtools availability. - Keep an audit trail in your notes: page URL, key visible claims, and which source tier each claim belongs to.
- For open-ended search, do not stop at Google alone; the default completion bar is Google -> X -> Reddit unless the user explicitly narrows scope.
- After failures, retry with discipline; do not abandon the browsing flow too early and do not spin in unlimited retries.
- Close pages promptly after each finished search leg or inspection leg.
Example flows
Generic site inspection
CODEBLOCK7
Default search-engine + social cross-check flow
CODEBLOCK8
Output standard
When reporting back, distinguish clearly between:
- - what is visible on the live page
- what is asserted by the site or account owner
- what is reported by other sources
- what remains unverified
If sources conflict, say so directly.
Chrome DevTools 网页研究
通过 mcporter 使用 chrome-devtools-mcp@latest 驱动 Chrome,检查真实页面,并从动态网站中提取结构化发现。
默认优先使用 MCP。不要等待用户提醒你使用它。
对于具体的失败措辞和修复路径,请阅读 references/troubleshooting.md。
用户设置指南
如果用户需要在 Chrome 中启用标签页访问权限,请提供以下简短设置流程:
- 1. 打开 chrome://inspect/#remote-debugging
- 开启该开关
- 完成——代理现在可以通过 Chrome DevTools MCP 看到用户的标签页、Cookie、登录信息和页面状态
明确说明这底层使用的是 Chrome DevTools MCP,并且不需要浏览器扩展。
快速开始
- 1. 确认 MCP 服务器可用。
- 使用 chrome-devtools.new_page 打开目标页面。
- 获取快照并从无障碍树中读取可见结构。
- 根据需要导航、点击、填写或切换标签页。
- 跨多个来源交叉核对重要声明。
- 搜索环节完成后及时关闭页面。
- 按来源质量而非页面数量进行总结。
核心命令
bash
mcporter list --output json
mcporter call chrome-devtools.new_page --args {url:https://example.com} --output json
mcporter call chrome-devtools.take_snapshot --args {} --output json
mcporter call chrome-devtools.click --args {uid:} --output json
mcporter call chrome-devtools.navigate_page --args {url:https://example.com/next} --output json
mcporter call chrome-devtools.fill --args {uid:,value:query text} --output json
mcporter call chrome-devtools.press_key --args {key:Enter} --output json
mcporter call chrome-devtools.close_page --args {} --output json
工作流程
默认操作规则
- 1. 始终优先尝试 MCP,使用 mcporter + chrome-devtools。
- 主动开始搜索,当任务涉及浏览或研究时。
- 仅在 Chrome 端访问中断时才停下来寻求帮助。
- 如果设置/访问失败,提示用户检查 Chrome,特别是远程调试/检查的可用性,然后重试。
- 及时关闭页面,当页面或搜索环节不再需要时。
失败与重试策略
不要在第一次 MCP/浏览器失败后就放弃。
使用 references/troubleshooting.md 获取具体的错误类别、面向用户的措辞和修复步骤。
严格遵循以下重试顺序:
- 1. 立即重试相同的 MCP 命令一次,如果错误看起来是暂时的。
- 如果仍然失败,再次运行 mcporter list --output json 以确认 chrome-devtools 仍然存在。
- 如果服务器存在,用最小的下一步重试:
- 使用 chrome-devtools.new_page 重新打开页面,或
- 重新运行 chrome-devtools.take_snapshot,或
- 重新发出单个点击/填写/导航操作。
- 4. 如果 Chrome 本身似乎不可达,明确告诉用户检查 Chrome 远程调试/检查访问权限,然后在此之后重试。
- 如果 Google 被验证码、同意墙或反机器人机制阻止,不要停滞。记录 Google 被阻止,然后继续到 X,再到 Reddit。
- 仅在浏览器桥接明显损坏且用户必须干预时才停止流程。
实用规则:优先采用一次立即重试 + 一次环境重新检查 + 一次恢复尝试。不要无限循环。
默认搜索策略
如果用户没有指定网站、平台或搜索引擎,默认按顺序遵循以下链条:
- 1. Google 优先
- X 第二
- Reddit 第三
将此视为标准搜索链条,而非可选建议。
链条的必需行为:
- - 从 Google 开始进行广泛发现、主要报道链条以及可能的主要/次要来源。
- 然后检查 X 获取实时传播、最新声明、引用帖子链条、矛盾点和突发更新。
- 然后检查 Reddit 获取社区溯源、浮出的链接以及可能揭示原始来源轨迹的讨论。
- 主动执行此操作。不要等待用户逐个要求每个平台。
- 如果用户只说搜索这个,仍然运行该链条,除非他们明确限制了范围。
- 如果一个来源被阻止、不可用或价值低,继续到下一个来源而不是停止。
最低可接受的默认序列:
- 1. 打开查询的 Google 搜索结果
- 在那里检查至少一个最新快照
- 打开相同查询的 X 搜索
- 在那里检查至少一个最新快照
- 打开相同查询的 Reddit 搜索
- 在那里检查至少一个最新快照
- 然后跨链条进行总结
如果 Google 被机器人挑战或同意墙阻止,报告该障碍,标记 Google 环节被阻止,然后继续 X -> Reddit,无需等待用户确认。
此默认适用于开放式网页研究。如果用户明确指定了其他网站、搜索引擎或平台,则遵循该指定。
1. 确认 MCP 访问
运行:
bash
mcporter list --output json
期望一个使用类似以下传输方式的 chrome-devtools 服务器:
text
STDIO npx chrome-devtools-mcp@latest --autoConnect
如果缺少 mcporter,先帮助用户安装它。如果缺少 chrome-devtools MCP 服务器,帮助用户配置或安装它,而不是停在模糊的错误处。
实用的安装/修复流程:
bash
npm i -g mcporter
mcporter list
如果 Chrome DevTools MCP 尚不可用,引导用户设置或重新连接 mcporter 使用的服务器,然后重试 mcporter list,直到出现 chrome-devtools。
不要询问是否应该使用 MCP。如果可用,立即继续。
2. 直接打开目标页面
尽可能优先使用直接 URL。
bash
mcporter call chrome-devtools.new_page --args {url:https://target-site.example/path} --output json
对以下情况使用直接导航:
- - 搜索结果页面
- 过滤后的 URL
- 帖子/文章/文档/问题的深层链接
- 直接打开比手动重现更容易的动态应用路由
如果网站支持 URL 查询参数,优先使用它们,而不是反复编辑脆弱的页面控件。
2.5 完成后关闭页面
不要不必要地保留研究标签页。
从页面提取所需内容后,或完成搜索环节后,及时关闭该页面,除非你仍然需要它进行比较。
bash
mcporter call chrome-devtools.close_page --args {} --output json
实用规则:
- - 打开页面
- 检查/交互/快照
- 记录发现
- 该环节完成后关闭页面
对于多来源研究,只保留所需的最少活动页面数量。
3. 读取快照,而非像素
在导航或交互后始终获取最新快照:
bash
mcporter call chrome-devtools.take_snapshot --args {} --output json
查找:
- - article、link、button、heading、textbox、combobox、tab、dialog
- 作者、时间戳、用户名、标题、标签、计数
- 指向原始报道或文档的出站链接
- 登录墙、同等标签、赞助内容或部分加载的迹象
仅在布局本身重要时使用截图。
4. 谨慎交互
使用最小的可靠操作:
- - navigatepage 用于直接 URL 变更
- click 用于标签页、过滤器、菜单、分页
- fill + presskey 用于搜索框和表单
- select_page 如果有多个标签页/页面打开
每次有意义的状态变更后,再获取一次快照。
5. 区分来源质量
将发现分组到以下类别:
- - 主要/官方:原始发布者、官方文档、组织页面、第一方仪表板
- 次要报道:媒体、分析师、引用来源的聚合账户
- 三级讨论:评论、粉丝账户、转发、AI 回复、无来源声明
同一声明的重复副本算作一个声明流,而非多次确认。
6. 在活动页面之外进行交叉核对
如果用户希望获得更高的可信度,将浏览器 MCP 发现与其他方法结合:
- - websearch 用于发现、扩展来源和查找外部报道
- webfetch 用于在出现页面 URL 且轻量提取足够时自动检索可读页面内容
- agent-browser 用于在有用时进行并行页面检查
- curl 作为获取式提取不可用或不足时的后备方案
使用浏览器获取实时状态和交互。当任务出现普通网页链接时,优先使用