调试猫这工具，我一开始真没当回事，觉得不就是个调试插件嘛。后来项目上线前有个诡异Bug，死活找不到原因，同事推荐我用调试猫试试，结果十分钟就定位到了问题。今天就把我这几个月用调试猫的实战经验整理出来，全是踩过坑后的干货，希望能帮那些还在用console.log打天下的朋友，换个思路快速定位代码Bug。
一、调试猫的断点设置，别只会点行号
刚接触调试猫的时候，我以为断点就是在代码行号旁边点一下就行。真用起来才发觉，调试猫的断点花样挺多。比如条件断点，在循环里特别管用，我那次Bug就是循环第50次才出错，你手动点断点得点几十次，烦死。调试猫里右键断点就能设条件，比如写个i===50，直接跳过前面49次，效率翻倍。
还有日志断点，不用改代码就能打印变量值。有时候你不想打断程序运行，但又想看看某个时刻的变量状态，用这个最合适。我之前调试一个异步回调用它，完全不影响程序的节奏，信息全在控制台里。刚开始用调试猫的时候，我还老习惯性地写console.log，现在基本都用日志断点代替了，代码干净多了。
二、变量监控和调用堆栈，才是定位Bug的核心
看变量值，大家都会，但调试猫的变量监控面板能实时显示所有作用域里的变量，还能手动添加监控表达式。我有次排查一个对象深拷贝的问题，直接在监控面板里输入obj.a.b，每一步操作后看它的变化，特别直观。比在代码里写一堆console.log强太多。
再就是调用堆栈，这个一定要养成看的习惯。Bug往往不是当前行的问题，而是谁调用了它才导致的状态异常。调试猫的堆栈信息点一下就能跳转到对应代码，从上到下捋一遍，很快就能发现是哪个参数传错了。我记得有个Bug，就是因为在某个回调里把变量名拼错了，堆栈看起来特别明显，一眼就抓住。而且调试猫还支持异步堆栈，Promise回调链上的信息也不丢，这个我特别满意。
三、配合日志和断点组合使用，效率更高
有时候单靠断点还不够，特别是前端联调的时候，接口数据不对，得看网络请求。调试猫虽然主攻代码调试，但它跟浏览器开发者工具衔接得很好。我一般习惯在网络请求回调里打下日志断点，同时用监控面板看返回值，再配合堆栈找到发送参数的地方，这样一条链路下来，Bug基本逃不掉。
还有个小技巧，基于异常自动暂停。调试猫里可以设置当代码抛出异常时自动断住，这个功能太适合那种'偶尔冒个错'的情况。我遇到过一个只在特定环境才出现的类型错误，开启这个后，异常一发生就停在出错行，再结合上下文，几分钟就锁定了原因。以前用console.log排查这种，得重复几十次操作，崩溃。
四、从入门到常用的几个小细节
最后说几个容易忽略的点。一是快捷键，调试猫的继续、单步跳过、单步进入这几个操作，记熟后鼠标都不用碰。我习惯F8继续，F10跳过，F11进入，这跟很多工具一样，但调试猫的反应很快，不卡顿，体验很舒服。
二是多浏览器调试，调试猫在Chrome、Edge甚至Firefox下表现都挺稳，没遇到过不兼容的怪问题。三是离线调试，有些工具必须联网，调试猫本地就能跑，在公司内网环境也不慌。
总之，调试猫这东西，用熟了真的能省一半排查Bug的时间。如果你还在一个个console.log重复刷新页面，赶紧试试调试猫的断点、监控和堆栈，绝对打开新世界。希望我这些调试猫使用技巧能帮到正在受苦的你，记住，工具再好也得先动手试试，踩几个坑就上手了。
喜欢 
顶
难过
囧
围观
无聊
