面试题：JavaScript调试技巧之断点调试深入

Question

在使用Chrome DevTools进行断点调试JavaScript代码时，如何设置条件断点？当遇到异步代码（如Promise、async/await）时，断点调试有哪些需要特别注意的地方？

Answer 1

设置条件断点

1. 在Chrome DevTools的Sources面板中，找到要设置断点的JavaScript文件，并定位到目标代码行。
2. 点击该行代码左侧的空白区域，添加普通断点。此时断点标记为蓝色实心圆。
3. 再次点击该蓝色实心圆断点标记，会弹出一个输入框，在其中输入条件表达式。例如，如果变量x等于10时要触发断点，就输入x === 10。设置好条件后，断点标记会变为蓝色空心圆，这就是条件断点。

异步代码断点调试注意事项

1. Promise：
   • 未处理的Promise拒绝：Chrome DevTools提供了捕获未处理的Promise拒绝的功能。在Sources面板中，勾选“Pause on caught exceptions”旁边的三角形，选择“Uncaught Promise rejections”。这样，当Promise被拒绝且没有被catch块处理时，调试器会暂停在抛出错误的位置。
   • 调试Promise链：由于Promise的异步特性，传统的断点可能无法按预期工作。可以在then和catch回调函数中设置断点，观察Promise处理过程中的数据变化。同时，可以利用async/await语法将Promise代码转换为更同步的风格，便于调试（见async/await部分）。
2. async/await：
   • 暂停位置：await关键字会暂停async函数的执行，直到Promise被解决（resolved或rejected）。在await关键字所在行设置断点，可以观察Promise解决后的值。也可以在async函数内部的其他关键位置设置断点，跟踪函数执行流程和变量变化。
   • 错误处理：async函数内部的错误通常使用try...catch块捕获。在catch块中设置断点，以便在异步操作抛出错误时能够及时调试。同时，注意不要遗漏错误处理，否则错误可能在代码中传播而不被察觉。