在复杂业务中调试问题
在现代的开发环境中，调试复杂的业务逻辑常常是一项挑战。面对各种各样的BUG，开发者需要掌握一些有效的调试技巧。以下是一些解决问题的流程和方法。
首先，当一个BUG被提出后，明确复现步骤是至关重要的。需要收集相关的信息，例如出现问题的文档、分支、操作系统等。确保所有的细节都被考虑到，以便更好地复现问题。
在确认信息后，尝试复现问题。如果能够直接复现，那就可以开始调试；如果不能，考虑是否遗漏了某些步骤，或者问题是否偶发。
在代码中锁定可能触发的函数，并在这些位置设置断点，以观察是否有不符合预期的异常。
首先最好是能定位到代码文件的位置，然后在这个文件内查找将要触发的函数。我现在十分喜欢使用 code-inspector-plugin 这个插件，作者做的很完善支持主流框架与各种 IDE，作用是在开发的时候可以在视图上使用 同时按住 shift + ⌥option 时启用功能(点击页面元素可定位至编辑器源代码)，现在我每个项目都会装。
定位到相关函数后复制函数名在本地开发的控制台右侧更多按钮点开后点击搜索
然后搜索后点击进入到这个函数再打上断点
打上断点后我们手动触发复现步骤就可以开始 debug 分析问题了
调试技巧分享
浏览器的调试工具非常强大，以下是一些常用的方法：
进入断点后，可以在右侧查看调用堆栈, 然后在右侧往上点击就可以排查触发链路，或者使用
console.trace()在控制台打印调用信息
使用条件断点，可以设置在特定数据情况下才进入断点，这在处理复杂数据时非常方便。
网络请求触发链路的调用栈也可以通过调试工具在接口请求的启动器中查看。
对于难以捕捉的元素，可以使用子树修改断点进行调试，或者通过复制粘贴元素来保留在页面上。
控制台输入
copy(obj.xxx)可以将对象的属性存入剪切板。
使用
$0选取上一个选中的元素，monitorEvents($0)可以监听该元素的所有事件并在控制台打印。
目前只想到了这些技巧可以分享一下，后续有新的技巧会补充~ 祝大家新年快乐！
