大家好，我是第八哥，一名有 10 年互联网开发经验的老兵。今天咱们聊聊JavaScript调试这个让无数开发者又爱又恨的话题。调试就像侦探破案，找不到bug时抓狂，解决后又成就感爆棚！
说实话，刚入行时我也总被 bug 折磨得头疼。后来才发现，不是 bug 太狡猾，是调试技巧没到家。
控制台不止 console.log：基础调试命令详解
很多新手调试就只会 console.log，但控制台的本事可大着呢。
比如 console.warn 能让警告信息黄底显示，console.error 则用于输出红底的错误信息，一眼就能区分。
console.warn('警告信息，黄色背景');
console.error('错误信息，红色背景');console.dir(obj) 能把对象展开成树形结构，比log直观10倍。调试数组时，console.table(arr) 直接生成可排序表格，数据关系一目了然。
let obj = { a: 1, b: 2 };
console.dir(obj);
let arr = [
{ name: "Bob", age: 30 },
{ name: "Alice", age: 25 }
];
console.table(arr);遇到复杂数据时，用 JSON.stringify(obj, null, 2) 进行格式化输出，层次分明不眼花。
let jsonObj = [
{ name: "Bob", age: 30 },
{ name: "Alice", age: 25 }
];
console.table(JSON.stringify(jsonObj, null, 2));遇到复杂逻辑，console.time('计时器') 和 console.timeEnd('计时器') 搭配，能精准算出代码的执行时间，让性能瓶颈无处藏。
console.time('timerTest');
for (let i = 0; i < 1000000000; i++) {
// 模拟复杂计算
}
console.timeEnd('timerTest'); // 输出 timerTest: 765.25390625 ms断点调试：让代码 “暂停” 在关键处
控制台打印虽好，却不如断点来得直接。在Source面板点击行号打个断点，代码运行到这就会停，变量值、调用栈看得明明白白。
普通断点不够用？那再试试条件断点。右键断点选“Edit condition”，或者右键行号选 “Add conditional breakpoint”，输入判断语句，只有满足条件时才暂停，复杂场景下效率飙升。
示例场景： 循环里找某个值
for (let i = 0; i < 100; i++) {
// 只在 i=50 时暂停
if (i === 50) debugger;
console.log(i);
}还有异常断点，勾选 Sources 面板的 “Pause on exceptions”，代码抛错时自动暂停，连隐藏的异常都能揪出来，超方便。
Source Map：解决压缩代码调试难题
生产环境的代码大多经过压缩混淆，报错信息全是一堆乱码，调试时根本看不懂。这时候 Source Map 就派上用场了。
它就像个翻译官，能把压缩后的代码对应回原始源码。配置也简单，webpack 构建时加一行 devtool: 'source-map'，打包后会生成.map文件。浏览器开发者工具开启“Enable source maps”，这样在控制台里，你看到的就是未压缩的源码，断点也能打在原始文件上。
注意生产环境别用 inline-source-map，可能泄露源码，选 hidden-source-map 更安全。
实战技巧：10 年总结的避坑指南
异步代码调试容易懵？试试在 .then 或 await 处加断点，或者用 console.time 计时：
console.time('请求耗时');
fetch('api/data').then(res => {
console.timeEnd('请求耗时'); // 显示从计时到这里的时间
});多文件项目里，用“XHR/fetch breakpoints”能在接口请求时暂停，轻松查接口参数和返回值。
遇到性能问题别慌，Performance 面板录制一段操作，火焰图会清晰的显示出每个函数的执行时间，谁拖慢了页面看一眼就知道。
另外，watch 表达式也很有用。在调试面板中添加变量，每次暂停都会自动显示它的值，不用反复打印。
最后想说，调试没有银弹，多练多总结才是王道。这些技巧练熟了，排错效率至少提升一倍。下次遇到bug，别再只会console.log啦。希望这些技巧能帮你少掉点头发～
评论