add official Chrome feature demos

2026-06-14 15:22:32 +08:00
parent 500217f2fd
commit de690f85fa
32 changed files with 2376 additions and 567 deletions
@@ -0,0 +1,68 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DevTools for Agents Demo Target</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main class="shell">
+      <section class="hero">
+        <p class="eyebrow">Chrome DevTools for agents</p>
+        <h1>给 Agent 一个真实浏览器现场</h1>
+        <p>
+          这个页面故意包含 console warning、404 图片、可触发长任务和布局溢出。
+          演示时让 Chrome DevTools MCP 连接到这个页面，要求 Agent 读取 console、network、DOM 和 performance。
+        </p>
+      </section>
+
+      <section class="prompt-board">
+        <article>
+          <p class="eyebrow">Official setup</p>
+          <h2>MCP 配置</h2>
+          <pre><code>{
+  "mcpServers": {
+    "chrome-devtools": {
+      "command": "npx",
+      "args": ["chrome-devtools-mcp@latest"]
+    }
+  }
+}</code></pre>
+        </article>
+
+        <article>
+          <p class="eyebrow">Prompt to run</p>
+          <h2>现场提问</h2>
+          <pre><code>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.</code></pre>
+        </article>
+      </section>
+
+      <section class="target">
+        <div class="broken-card">
+          <span>Network</span>
+          <h2>这张图片故意 404</h2>
+          <img src="./missing-dashboard.png" alt="Missing dashboard screenshot" />
+        </div>
+
+        <div class="broken-card overflow">
+          <span>Layout</span>
+          <h2>这段文本故意撑破容器</h2>
+          <p>SuperLongUnbrokenEnterpriseDashboardIdentifier_ChromeAgentRuntimeDebugging_2026_Overflow</p>
+        </div>
+
+        <div class="broken-card">
+          <span>Performance</span>
+          <h2>触发可检测的长任务</h2>
+          <button id="long-task">触发长任务</button>
+          <p id="task-result">等待触发。</p>
+        </div>
+      </section>
+    </main>
+
+    <script src="./app.js" type="module"></script>
+  </body>
+</html>