js的debugger工具调试技巧

拼搏现实的明天。 2021-12-19 01:47 547阅读 0赞

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

#### 1.在代码处加入debugger； ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70] ####

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

网页前端点击相应事件后，chrome浏览器的F12调试界面会自动弹出调试信息。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70 1]

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

调试按钮的位置在Sources调试窗口的右上角，功能和位置如下面几图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][20190702003943906.png]  
功能1—进入下个断点：  
![在这里插入图片描述][20190702004008947.png]快捷键F8，如果有多个断点，点击时可以直接进入下个断点，忽略断点内部所有逻辑。

功能2—忽略代码内部实现，进入下个方法：.  
![在这里插入图片描述][20190702004120235.png]快捷键 F10，不关注方法内部逻辑，点击直接跳到当前断点的下个方法。

功能3—单步调试，逐行执行：  
![在这里插入图片描述][20190702004157406.png]快捷键F11，按照代码顺序，从上到下，一行一行执行。

功能4—跳出当前函数内部，执行下一步  
![在这里插入图片描述][20190702004220180.png]快捷键shift+F11。

\**还有几个按钮没怎么用过，功能也不大了解，但这几个足够你调试用了。*  
\*  
功能5—查看变量：  
开发工具右边的scope区域查看局部变量与全局变量。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70 3]

#### 4.兼容性： ####

我所知道支持`debugger;`打断点调试的浏览器，部分浏览器可能不适合，但作为开发人员通常都是以谷歌的Chrome浏览器调试为主：  
![在这里插入图片描述][20190702005226853.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70]: /images/20211219/2db3222621a740fbaa9949629690edfa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70 1]: /images/20211219/1a459e1419514d05a6df0edb4470aee4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70 2]: /images/20211219/82d30f6d5d1247f3a3a16d9bcd8e680d.png
[20190702003943906.png]: /images/20211219/5848ba37b591427b9cac5f94ed9c1b20.png
[20190702004008947.png]: /images/20211219/502e82a0e1624912b4f53c952600b200.png
[20190702004120235.png]: /images/20211219/0e75a9bdd0b14aec873a6b12554a435b.png
[20190702004157406.png]: /images/20211219/7266ad077ad047b19d14addf0b858b93.png
[20190702004220180.png]: /images/20211219/b0b5a5e637d648a396914a1a2ced7072.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70 3]: /images/20211219/289e5f6a0b5a4df6a4d3b01f979abed1.png
[20190702005226853.png]: /images/20211219/7c14f8f263eb487982b85a3cf5ed64a9.png