javascript断点调试

大家好，又见面了，我是你们的朋友全栈君。

一、方法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.cn/143427.html原文链接：https://javaforall.cn