1.🛠️ 前端调试方法全指南（四层进阶版）

第一层：浏览器开发者工具（核心）

这是前端调试的基础，也是最常用的手段。

---

第二层：控制台高级用法（别只会用 console.log）

除了 log，还有这些高效的调试方式：

---

第三层：网络与性能调试

当问题出在接口请求、页面卡顿或性能瓶颈时，用这一层的工具：

---

第四层：线上与工程化调试

线上环境的问题，需要这些工具和方案：

---

2.📝 前端调试面试速记（四层结构）

---

1️⃣ 核心层：浏览器开发者工具（必问）

• Sources 断点调试：逐行执行、看调用栈、查变量实时值，定位逻辑错误。

• Watch 监听：自动追踪变量变化，替代反复 console.log。

• 条件断点：仅在满足条件时暂停，高效定位特定场景问题。

• Blackbox Script：跳过第三方库，只调试业务代码，减少干扰。

---

2️⃣ 控制台高级用法（加分项）

• console.table：表格化展示数组 / 对象，提升可读性。

• console.dir：查看 DOM 对象完整属性，而非仅 HTML 结构。

• console.time/timeEnd：统计代码执行耗时，做性能分析。

• console.trace：打印完整调用栈，快速定位函数调用来源。

---

3️⃣ 网络与性能调试（进阶考点）

• Network 面板：查接口响应头、耗时、阻塞、缓存，解决请求 / 跨域问题。

• Performance 面板：录制运行过程，排查卡顿、长任务、重绘回流。

• Memory 面板：定位内存泄漏、闭包引用，解决页面越用越卡。

• Lighthouse：一站式性能 / 体验 / SEO 体检，输出优化建议。

---

4️⃣ 线上与工程化调试（高阶考点）

• Source Map：线上压缩代码映射源码，快速定位线上报错位置。

• 抓包工具（Charles/Fiddler）：拦截修改请求，模拟环境、调试接口问题。

• 错误监控（Sentry）：收集线上错误，附带调用栈 / 用户环境信息。

• Vite/Webpack 调试：配置代理、区分环境，解决跨域与构建问题。

图