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

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

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

功能	用途说明
Sources 断点调试	逐行执行代码、查看调用栈、实时查看变量值，定位逻辑问题
Watch 监听	自动追踪变量变化，无需反复打印日志
条件断点	只在满足特定逻辑条件时暂停，大幅节省调试时间
Blackbox Script	跳过第三方库（如框架、SDK）的代码，只关注自己写的业务逻辑

---

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

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

方法	用途说明	示例
console.table	以表格形式格式化展示数组 / 对象，可读性拉满	console.table([{a:1, b:2}, {a:3, b:4}])
console.dir	查看完整 DOM 对象的所有属性，而不是打印 HTML 结构	console.dir(document.body)
console.time / console.timeEnd	统计一段代码的执行耗时，用于性能分析	console.time('test'); ...; console.timeEnd('test')
console.trace	打印当前函数的完整调用栈，快速定位函数调用来源	console.trace('调用栈')

---

第三层：网络与性能调试

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

面板 / 工具	用途说明
Network（网络面板）	查看接口请求详情：响应头、耗时、请求阻塞、缓存策略，排查接口报错、跨域、缓存问题
Performance（性能面板）	录制页面运行过程，分析卡顿、长任务、重绘 / 回流等性能问题
Memory（内存面板）	抓内存泄漏、闭包引用、无用对象，解决页面越用越卡的问题
Lighthouse	一站式体检：性能评分、用户体验优化建议、SEO 问题排查

---

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

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

工具 / 技术	用途说明
Source Map	线上压缩后的代码，通过 Source Map 定位到原始源码位置，方便排查线上报错
抓包工具（Charles / Fiddler）	拦截、修改网络请求，模拟不同环境、修改接口响应，调试线上 / 跨域问题
错误监控平台（Sentry）	自动收集线上错误，附带用户环境、调用栈等信息，快速定位生产环境问题
Vite / Webpack 调试	配置代理、区分开发 / 生产环境，解决跨域、环境变量、构建配置相关的问题

---

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 调试：配置代理、区分环境，解决跨域与构建问题。

图