前端调试技巧

以创见网站首页为例，介绍 Lighthouse 的五个分析维度、三种模式，并逐项解读性能、无障碍、最佳做法、SEO 与智能体浏览的报告。

从 Memory 面板的五个按钮和三种录制方式讲起，用一个会泄漏的 Demo 演示如何通过时间线观察内存增长、通过堆快照的 Retained size 和引用链定位泄漏，并总结出通用的排查步骤。

系统介绍 FCP、LCP、CLS、TBT 和 INP 的含义、参考标准、常见问题及优化方法，并辨析 TBT 与 INP 的区别。

结合 React 和 Next.js 项目示例，说明 sourcemap 如何把构建后的 chunks 映射回原始源码，并演示普通断点、条件断点和列表渲染断点的调试方式。

系统梳理前端页面调试中的普通源码断点、条件断点、DOM 断点、事件监听断点、XHR/fetch 请求断点、debugger 语句，以及 React/Next.js 构建成 chunks 后为什么更适合配合 sourcemap 调试。

用两个极简 Demo 演示 Chrome Performance 面板的录制、时间线放大与 Main 火焰图解读：讲清同步任务与宏任务（setTimeout）在调用栈和 Task 边界上的区别，并解释 Recalculate Style、Layout、Pre-paint、Paint、Commit 等渲染事件的执行顺序。