谷歌浏览器进行JS断点调试

打开谷歌浏览器,点击F12,打开开发者工具

Sources中存放着:html、css、js、jsp

Elements中可以查看页面的dom结构

1.debugger的使用(添加断点的方式一)

在需要调试的js代码中,添加“debugger”,末尾不需要添加分号

谷歌浏览器进行JS断点调试_第1张图片

当运行到这行js时,如果谷歌浏览器的开发者调试模式已开启,则会自动进入到js调试模式,js代码的执行将停留在这一行。

谷歌浏览器进行JS断点调试_第2张图片

如下图为js调试的工具条

谷歌浏览器进行JS断点调试_第3张图片

如果需要查看一下js中某个变量的值,则可以将鼠标移动到js中的这个变量上,就会自动在其旁边显示该变量的值

谷歌浏览器进行JS断点调试_第4张图片

也可以切换到console控制台,在控制台中输入需要查看的变量名,点击回车就可以查看该变量的值

谷歌浏览器进行JS断点调试_第5张图片

为了观察变量的值,也可以在Watch中添加需要观察的变量名,在js调试的过程中,可以很方便的观察到这些变量值的变化情况

谷歌浏览器进行JS断点调试_第6张图片

2.在Sources中设置断点(添加断点的方式二)

在浏览器中点击F12或者Ctrl+Shift+i,打开开发者调试工具,在如下图的Sources中选择需要添加断点的js文件,并在指定的位置点击行号,即可添加断点,如下图所示。这样,当JS代码执行到断点位置,就会停留在这一行,等待执行调试。

谷歌浏览器进行JS断点调试_第7张图片

3.查看页面中指定区域的dom结构

打开浏览器的开发者调试工具,点击如下图的箭头

在页面中,使用鼠标点选指定区域,如下图使用鼠标点选的是“查看”按钮

Elements蓝色部分区域,如下图为上面“查看”按钮对应的内容

谷歌浏览器进行JS断点调试_第8张图片

 

 

 

 

你可能感兴趣的:(JavaScript)