一 、引言

绝大多数前端开发使用的是chrome浏览器,所以我也将自己的使用心得总结一下,有错望指正,侵删。和使用idea或者eclipse一样,在前端编写的js代码同样可以进行debug调试。相对与使用console或者alert。使用debugger,可以完成更多的功能,比如查看作用域变量、函数参数、函数调用堆栈以及代码整个的执行过程,对于我们的调试是有很大的帮助的。

二、参考博客

  1. js断点调试心得
  2. Chrome断点调试
  3. js中debugger常用的几个命令

三、调试菜单栏介绍

打开开发者工具窗口之后,在sources选项中,如下图所示的debug时所需要的按键介绍:

iOS 如何获取debug包闪退日志_快捷键


从左至右依次是:

  1. (等号)pause script execution
    –>暂停脚本执行
  2. (半弧箭头)step 快捷键:F9
    –>单步执行 注意:遇到子函数会进去继续单步执行
  3. (下箭头)step into 快捷键:F11 全称:step into next function call
    –>单步执行,遇到子函数就进去继续单步执行
  4. (上箭头)step over 快捷键:F10 全称:step over next function call
    –>单步执行,遇到子函数并不进去,将子函数执行完并将其作为一个单步
  5. (右箭头)step out 快捷键:Shift + F11 全称:step out of current function
    –>直接跳出当前的函数,返回父级函数
  6. (右粗箭头,点击一下多一个斜线,再次点击就取消了)deactivate breakpoints or activate breakpoints
    –>禁用断点/启用断点
  7. (圆形等号)pause on execution
    –>暂停执行

四、小按钮介绍

一、“逐语句执行”或者“逐步执行”按钮:

1、意思就是,每点击它一次,js语句就会往后执行一句

2、快捷键F10

iOS 如何获取debug包闪退日志_子函数_02


二、“逐过程执行”按钮:

1、常用在一个方法调用多个js文件时,涉及到的js代码比较长,则会使用到这个按钮(相当于从一个断点调到下一个断点) 2、快捷键F8

iOS 如何获取debug包闪退日志_子函数_03

五、在调试窗口打断点

如果我们在javascript中写debugger,当然可以完成断点调试的需求,但是每次都需要写debugger,然后删除,很麻烦。然而和调整样式时一样,我们也可以在调用窗口打断点。如下图所示:

iOS 如何获取debug包闪退日志_子函数_04


首先在左侧期望行位置左键点击,即可出现如图样式,这即代表断点,然后刷新页面就会生效了。最后在右侧通过调试按钮或者快捷键即可调试。

六 watch的使用

watch是一个非常好用的工具,具体使用待补充

因为LZ也是在网上查阅各位大佬的资料及自己的理解写的,在开头已经贴出原文地址。若果有错误,万望指正;如果涉及侵权,请联系本人删除。