每天一个前端小知识 Day 32 - 前端调试技巧与开发者工具深度使用指南

前端调试技巧与开发者工具深度使用指南

🎯 一、调试为何是核心开发力？

会写代码≠会调试代码
能快速、准确地排查问题并修复，才是高级前端必备能力。

调试不仅限于 console.log，而是借助浏览器和开发工具全方位观察、验证、测试和定位问题。

🧠 二、掌握 Chrome DevTools 的关键模块

🛠 三、调试技巧实战整理

1. ✅ Console 的高级调试用法

console.table([{ name: 'Tom', age: 20 }, { name: 'Jerry', age: 18 }]);

console.time('loop');
for (let i = 0; i < 1000; i++) { /*...*/ }
console.timeEnd('loop');

console.assert(1 === 2, '这是一条错误断言');

console.group('事件触发');
console.log('按钮点击了');
console.groupEnd();

📌 提升输出信息结构化、层次化、便于排查。

2. 🎯 Sources 面板断点调试

• 点击某一行左侧设置断点
• 使用 快捷键：F10（逐行）、F11（进入函数）
• 利用 Watch Expressions 观察变量变化
• 使用 Call Stack 理解函数调用链

3. 📡 Network 面板排查请求问题

• 查看请求是否 200/304/500
• 检查请求头、响应头、请求体、响应数据
• 验证 Content-Type 和请求格式
• 使用过滤条件（XHR、Script、CSS）
• 查看某接口是否因跨域、token 失效等失败

4. 🔍 Elements + Styles 面板实时改样式

• 鼠标悬停检查元素尺寸、边距、布局模型
• 修改 DOM 节点、添加类名观察样式变化
• 强化调试 UI 问题（如 Flex 布局错乱）

⚙️ 四、调试复杂 JS：断点 + 条件断点 + 日志断点

// 条件断点
for (let i = 0; i < 1000; i++) {
  // 只在 i === 512 时中断
}

// 日志断点：右键 → Add logpoint

💡 五、调试技巧小结

🔍 六、前端日志采集与埋点工具补充（面试进阶）

🧪 七、面试高频问题拆解

📌 Q1：你在开发过程中如何排查接口报错？

答：

• 使用 Chrome DevTools 的 Network 面板
• 查看接口的 URL、响应状态码、响应数据是否错误
• 检查请求参数、Header、token 是否缺失
• 同时 Console 查看 JS 报错和 Catch 捕获

📌 Q2：页面白屏怎么排查？

答：

• 查看控制台是否有 JS 报错
• 打开 Network 看静态资源（JS/CSS）是否加载失败
• 用 Performance 面板看页面加载顺序，是否卡在某个阶段
• 是否使用了错误的动态挂载点（如 DOM 元素未准备好）

📌 Q3：你用过哪些前端监控/日志采集方案？

答：

使用过 Sentry 进行 JS 错误上报、使用自研 log 工具结合接口记录业务日志（如用户操作、接口耗时）。日志系统一般分为：

• 错误采集（error、xhr）
• 性能采集（白屏、卡顿、FPS）
• 用户行为采集（点击、路由、交互路径）

✅ 总结