chrome开发者工具（调试）

引言

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

调试菜单栏介绍

  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. “逐语句执行”或者“逐步执行”按钮：

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

    2)  快捷键F10

  2.  “逐过程执行”按钮：

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

    2） 快捷键F8

直接在窗口打断点

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

      1）首先在左侧期望行位置左键点击

      2）然后刷新页面就会生效了

      3） 最后在右侧通过调试按钮或者快捷键即可调试。