add official Chrome feature demos
This commit is contained in:
@@ -0,0 +1,14 @@
|
||||
console.warn("Demo warning: this page intentionally includes diagnosable issues.");
|
||||
|
||||
const longTaskButton = document.querySelector("#long-task");
|
||||
const taskResult = document.querySelector("#task-result");
|
||||
|
||||
longTaskButton.addEventListener("click", () => {
|
||||
const start = performance.now();
|
||||
while (performance.now() - start < 650) {
|
||||
Math.sqrt(Math.random() * Number.MAX_SAFE_INTEGER);
|
||||
}
|
||||
const duration = Math.round(performance.now() - start);
|
||||
taskResult.textContent = `已触发约 ${duration}ms 的主线程长任务。`;
|
||||
console.error("Demo error: long task was triggered for DevTools MCP inspection.");
|
||||
});
|
||||
@@ -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>
|
||||
@@ -0,0 +1,139 @@
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--ink: #111827;
|
||||
--muted: #667085;
|
||||
--paper: #f7f8fa;
|
||||
--panel: #ffffff;
|
||||
--line: #d7dce2;
|
||||
--red: #b42318;
|
||||
--blue: #1849a9;
|
||||
--code: #111827;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
color: var(--ink);
|
||||
background:
|
||||
linear-gradient(90deg, rgb(17 24 39 / 0.05) 1px, transparent 1px),
|
||||
linear-gradient(rgb(17 24 39 / 0.05) 1px, transparent 1px),
|
||||
var(--paper);
|
||||
background-size: 28px 28px;
|
||||
font-family: ui-sans-serif, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
.shell {
|
||||
width: min(1180px, calc(100vw - 32px));
|
||||
margin: 0 auto;
|
||||
padding: 42px 0 60px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 10px;
|
||||
color: var(--red);
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
max-width: 760px;
|
||||
margin-bottom: 18px;
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
font-size: clamp(42px, 7vw, 86px);
|
||||
line-height: 0.9;
|
||||
}
|
||||
|
||||
.hero p,
|
||||
.broken-card p {
|
||||
max-width: 760px;
|
||||
color: var(--muted);
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.prompt-board,
|
||||
.target {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 18px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.target {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
article,
|
||||
.broken-card {
|
||||
border: 1px solid var(--line);
|
||||
background: rgb(255 255 255 / 0.92);
|
||||
box-shadow: 0 18px 58px rgb(17 24 39 / 0.12);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
margin: 0;
|
||||
border: 1px solid #2f3947;
|
||||
background: var(--code);
|
||||
color: #e7edf4;
|
||||
padding: 16px;
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.broken-card span {
|
||||
display: inline-flex;
|
||||
margin-bottom: 12px;
|
||||
border: 1px solid rgb(180 35 24 / 0.35);
|
||||
padding: 4px 9px;
|
||||
color: var(--red);
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.broken-card img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: 150px;
|
||||
border: 1px dashed var(--red);
|
||||
background: #fff5f4;
|
||||
}
|
||||
|
||||
.overflow {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.overflow p {
|
||||
width: max-content;
|
||||
color: var(--blue);
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
}
|
||||
|
||||
button {
|
||||
min-height: 42px;
|
||||
border: 1px solid var(--ink);
|
||||
background: var(--ink);
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
padding: 10px 14px;
|
||||
font: inherit;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.prompt-board,
|
||||
.target {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user