add official Chrome feature demos

pages/demo/devtools-agents.md

@@ -0,0 +1,50 @@
+# 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.
+-->