一 、引言
绝大多数前端开发使用的是chrome浏览器,所以我也将自己的使用心得总结一下,有错望指正,侵删。和使用idea或者eclipse一样,在前端编写的js代码同样可以进行debug调试。相对与使用console或者alert。使用debugger,可以完成更多的功能,比如查看作用域变量、函数参数、函数调用堆栈以及代码整个的执行过程,对于我们的调试是有很大的帮助的。
二、参考博客
- js断点调试心得
- Chrome断点调试
- js中debugger常用的几个命令
三、调试菜单栏介绍
打开开发者工具窗口之后,在sources选项中,如下图所示的debug时所需要的按键介绍:
从左至右依次是:
- (等号)pause script execution
–>暂停脚本执行 - (半弧箭头)step 快捷键:F9
–>单步执行 注意:遇到子函数会进去继续单步执行 - (下箭头)step into 快捷键:F11 全称:step into next function call
–>单步执行,遇到子函数就进去继续单步执行 - (上箭头)step over 快捷键:F10 全称:step over next function call
–>单步执行,遇到子函数并不进去,将子函数执行完并将其作为一个单步 - (右箭头)step out 快捷键:Shift + F11 全称:step out of current function
–>直接跳出当前的函数,返回父级函数 - (右粗箭头,点击一下多一个斜线,再次点击就取消了)deactivate breakpoints or activate breakpoints
–>禁用断点/启用断点 - (圆形等号)pause on execution
–>暂停执行
四、小按钮介绍
一、“逐语句执行”或者“逐步执行”按钮:
1、意思就是,每点击它一次,js语句就会往后执行一句
2、快捷键F10
二、“逐过程执行”按钮:
1、常用在一个方法调用多个js文件时,涉及到的js代码比较长,则会使用到这个按钮(相当于从一个断点调到下一个断点) 2、快捷键F8
五、在调试窗口打断点
如果我们在javascript中写debugger,当然可以完成断点调试的需求,但是每次都需要写debugger,然后删除,很麻烦。然而和调整样式时一样,我们也可以在调用窗口打断点。如下图所示:
首先在左侧期望行位置左键点击,即可出现如图样式,这即代表断点,然后刷新页面就会生效了。最后在右侧通过调试按钮或者快捷键即可调试。
六 watch的使用
watch是一个非常好用的工具,具体使用待补充
因为LZ也是在网上查阅各位大佬的资料及自己的理解写的,在开头已经贴出原文地址。若果有错误,万望指正;如果涉及侵权,请联系本人删除。