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

1.在代码处加入debugger;

debugger javascript中文 js中debugger怎么用_JSP打断点

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

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

debugger javascript中文 js中debugger怎么用_JSP打断点_02

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

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

debugger javascript中文 js中debugger怎么用_JSP打断点_03


debugger javascript中文 js中debugger怎么用_java文件_04


功能1—进入下个断点:

debugger javascript中文 js中debugger怎么用_快捷键_05

快捷键F8,如果有多个断点,点击时可以直接进入下个断点,忽略断点内部所有逻辑。功能2—忽略代码内部实现,进入下个方法:.

debugger javascript中文 js中debugger怎么用_java文件_06

快捷键 F10,不关注方法内部逻辑,点击直接跳到当前断点的下个方法。功能3—单步调试,逐行执行:

debugger javascript中文 js中debugger怎么用_调试方法_07

快捷键F11,按照代码顺序,从上到下,一行一行执行。功能4—跳出当前函数内部,执行下一步

debugger javascript中文 js中debugger怎么用_JSP打断点_08

快捷键shift+F11。*还有几个按钮没怎么用过,功能也不大了解,但这几个足够你调试用了。

*

功能5—查看变量:

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

debugger javascript中文 js中debugger怎么用_调试方法_09

4.兼容性:

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

debugger javascript中文 js中debugger怎么用_快捷键_10