# Demo 6：DevTools for agents 官方流程

<div class="grid grid-cols-2 gap-8 mt-8">

<div class="card-blue">
<div class="font-semibold mb-3">官方 MCP 配置</div>

```json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest"]
    }
  }
}
```

</div>

<div class="card-red">
<div class="font-semibold mb-3">本地检查目标</div>
<div class="space-y-2 text-sm">

- <span class="font-mono">/demo/devtools-agents/index.html</span>
- 故意制造 console warning / error
- 故意制造 404 图片
- 点击按钮触发长任务
- 让 Agent 读取 console、network、trace

</div>
</div>

</div>

<div class="mt-8 card text-sm">
讲解结论：DevTools for agents 不是页面 API，而是把真实浏览器运行时交给 coding agent，让它不再只根据源码猜问题。
</div>

<!--
官方依据：
- https://developer.chrome.com/docs/devtools/agents/get-started
- https://github.com/ChromeDevTools/chrome-devtools-mcp

现场 prompt:
Open http://localhost:3030/demo/devtools-agents/index.html.
Inspect console and network errors.
Then click "触发长任务" and record a performance trace.
Summarize what you found.
-->