51 lines
1.2 KiB
Markdown
51 lines
1.2 KiB
Markdown
# 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.
|
||
-->
|