# 模拟展示 2：DevTools 排查链路

<div class="mt-8">

```mermaid {scale: 0.82}
flowchart LR
    A[用户反馈卡顿] --> B[Performance 录制]
    B --> C[定位长任务]
    C --> D[Network 查资源瀑布]
    D --> E[Coverage 查无效代码]
    E --> F[形成优化清单]
```

</div>

<div class="grid grid-cols-2 gap-6 mt-8">

<div class="card">
<div class="font-semibold mb-2">演示素材</div>
<div class="text-sm text-gray-400">准备一个加载慢、交互卡顿、资源偏大的页面作为示例。</div>
</div>

<div class="card-green">
<div class="font-semibold mb-2">观众收获</div>
<div class="text-sm text-gray-400">把 DevTools 从“会打开”变成“按链路定位问题”。</div>
</div>

</div>

<!--
这一页用于现场演示细节。建议讲一个真实或模拟页面，从 Performance 开始抓主线程问题，再用 Network 和 Coverage 找资源问题，最后输出可执行的优化清单。
-->