chrome开发者工具（1）之前端使用debug调试

一 、引言

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

二、参考博客

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

三、调试菜单栏介绍

打开开发者工具窗口之后，在sources选项中，如下图所示的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

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

五、在调试窗口打断点

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

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

六 watch的使用

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

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