谷歌浏览器进行JS断点调试
打开谷歌浏览器,点击F12,打开开发者工具
Sources中存放着:html、css、js、jsp
Elements中可以查看页面的dom结构
1.debugger的使用(添加断点的方式一)
在需要调试的js代码中,添加“debugger”,末尾不需要添加分号
当运行到这行js时,如果谷歌浏览器的开发者调试模式已开启,则会自动进入到js调试模式,js代码的执行将停留在这一行。
如下图为js调试的工具条
如果需要查看一下js中某个变量的值,则可以将鼠标移动到js中的这个变量上,就会自动在其旁边显示该变量的值
也可以切换到console控制台,在控制台中输入需要查看的变量名,点击回车就可以查看该变量的值
为了观察变量的值,也可以在Watch中添加需要观察的变量名,在js调试的过程中,可以很方便的观察到这些变量值的变化情况
2.在Sources中设置断点(添加断点的方式二)
在浏览器中点击F12或者Ctrl+Shift+i,打开开发者调试工具,在如下图的Sources中选择需要添加断点的js文件,并在指定的位置点击行号,即可添加断点,如下图所示。这样,当JS代码执行到断点位置,就会停留在这一行,等待执行调试。
3.查看页面中指定区域的dom结构
打开浏览器的开发者调试工具,点击如下图的箭头
在页面中,使用鼠标点选指定区域,如下图使用鼠标点选的是“查看”按钮
Elements蓝色部分区域,如下图为上面“查看”按钮对应的内容