大家好，又见面了，我是你们的朋友全栈君。
一、方法1
1.断点文件位置
打开chrome，找到Sources，在一堆的文件夹里面找到你要调试的js文件，打开它：
下面是html前端展示：
2.打断点
当你运行代码的时候，例如：操作搜索按钮点击事件，出现未知问题。
首先，给Sources里面的js文件打断点。点击你要调试的代码的行数，发现行数会被标记为蓝色（chrome），这说明已经成功打断点了，恭喜你成功了第一步。
3.断点调试（快捷键f8）
对断点进行调试，首先观察我们标记的断点，在点击事件内部，这个时候我们应该怎么做才能触发这些断点？
是的，去触发它，点击搜索按钮，触发这个方法，这样断点才会被执行到。
下图就是点击搜索按钮，我们先不在时间选择器上输入值，点击搜索，触发断点，进入调试状态。
下面是调试状态时的一些实时数据显示，在最右侧的状态栏中，scope -> local，看到一些信息，otime是断点150行的调试信息，这里显示是undefined对吧，这个是因为我们没有在时间选择器上输入有效值。
下面接着调试，这次输入时间。这时再看，在scope -> local 展示的信息，是我们想要得到的otime的变量，而在 断点150行，也会看到有信息展示。
当然，我们可以用另外的方法去看这个时候otime的值，在控制台中(console)输入你想要查看的变量，回车，会看到你想要的结果。
4.逐语句执行（快捷键f10）
我们会看到在调试界面的上方，有个悬浮框，首先看最右边的按钮。
鼠标悬浮，会出现一段英语step over next function call（单步执行函数调用），可以理解为逐步执行或者逐语句执行，点击这个按钮。
我点击两次之后，会发现调试进行到了152行，右侧的scope -> local 展示的也是实时变量
——– 未完待续 ——-
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/143427.html原文链接：https://javaforall.net
