js的debugger工具调试技巧

.java文件可以在开发环境里打断点来调试，而.jsp文件也可以打断点来调试。但.jsp文件加断点的方法与.java文件加断点的方式不同，.jsp是在要调试的代码处加入 debugger; 语句来标识断点的位置，而当前端页面点击触发到该代码处时，浏览器的F12调试界面就会自动弹出调试的消息。

1.在代码处加入debugger； 在这里插入图片描述

2.打开谷歌浏览器chrome进入F12调试功能

网页前端点击相应事件后，chrome浏览器的F12调试界面会自动弹出调试信息。

3.了解调试功能和快捷键

调试按钮的位置在Sources调试窗口的右上角，功能和位置如下面几图所示。

功能1—进入下个断点：

快捷键F8，如果有多个断点，点击时可以直接进入下个断点，忽略断点内部所有逻辑。

功能2—忽略代码内部实现，进入下个方法：.

快捷键 F10，不关注方法内部逻辑，点击直接跳到当前断点的下个方法。

功能3—单步调试，逐行执行：

快捷键F11，按照代码顺序，从上到下，一行一行执行。

功能4—跳出当前函数内部，执行下一步

快捷键shift+F11。

还有几个按钮没怎么用过，功能也不大了解，但这几个足够你调试用了。

功能5—查看变量：

开发工具右边的scope区域查看局部变量与全局变量。

4.兼容性：

我所知道支持 debugger; 打断点调试的浏览器，部分浏览器可能不适合，但作为开发人员通常都是以谷歌的Chrome浏览器调试为主：