大家好,又见面了,我是你们的朋友全栈君。
一、方法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
展示的也是实时变量
——– 未完待续 ——-
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/143427.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...