前端调试技巧

系统介绍 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 等渲染事件的执行顺序。