39 lines
847 B
Markdown
39 lines
847 B
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>
|