断点调试

2019-06-21  本文已影响0人  潘肚饿兵哥哥

\color{rgba(254, 67, 101, .8)}{断点调试}

\color{rgba(254, 67, 101, .8)}{断点调试可以帮我们观察程序运行的过程}

1.浏览器按F12
2.点击sources
3.找到要调试的文件,双击此文件
4.在程序的某一行的行号处设置断点,然后刷新浏览器,浏览器刷新过后会一直在转圈,就表示已经开始在执行代码了,只不过此时是卡在了代码的某一处,所以一直转
5.此时鼠标放到变量上去,就会看到变量执行到了几

image.png

或者不用鼠标放到i上去,点击watch后面的 + 号,然后输入要查看的变量,就会显示出此时变量的值

image.png image.png

此时可以看到,在sourse中,i的值已经跳到了7,而在console中,也输出了6次你好吗

watch:监视,通过watch可以监视变量的值的变化
F11:程序单步执行,让程序一步一步的执行,这个时候,观察watch中变量的值的变化。
打断点是调试BUG的重要手段

\color{rgba(254, 67, 101, .8)}{如果要退出代码调试,再点一次行号,就取消调试了}

上一篇下一篇

猜你喜欢

热点阅读