JavaScript调试的那些事

        最近领导让我好好学学关于Chrome的调试，当时我心思不就是打个断点，然后逐行定位就可以了么。后来上网找资料了解一番后，才发现真是图样图森破呀！原来Chrome调试有这么多说道，下面就总结记录了一下。

先来说说Developer Tool里面的东西都是干嘛的吧。

• 放大镜：视图模式下选取节点
• 手机：启用实时屏幕适配视图
• Elements查看当前文档的DOM信息
  
• Console 查看调试用的，也可以直接写JS代码
• Source 查看当前资源文件的（CSS,JS,IMAGE）
• Network 查看网络请求的内容、HTTP头、请求时间等信息
• Timeline 查看JS执行时间、页面渲染时间
• Profiles 分析js中每个函数执行的百分比
• Resources 查看本地资源信息的（cookie,local storage,session storage等）
• Security 关于安全的插件，没深入研究
• Audits 性能优化，可以查看当前页面没有用到的样式等。

  
  

  ****每一个功能里面都有很多操作按钮，建议自己都玩一下，这里就不再多说。我来主要说说关于js调试，它的一般用到的Console、Source、Network这三个比较多。还有一点要提前说明一下，Chrome支持在线调试，更改完htm、css、js(需要ctrl+s)后，点击页面即可看到变化，而且还会有代码提示，太人性化了。

  
  

  1、简单的调试：（最基础也是用的最多的）

  如果直接提示错误，可以直接看下面的console控制台的提示错误信息，然后双击右上角的红色提示，即可直接定位到错误代码行，然后根据上下文及错误信息修改。

  而当没有提示的时候，就需要使用代码格式化功能（source打开一个文件在代码行下方有个”{}“）将被压缩的线上代码展开，然后开启自动异常断点，尝试重现 Bug。当 Bug 出现时代码会自动断到出错的那一行。然后通过调用栈分析结合控制台找到最开始出错的那个函数上。一般的 Bug 到这里就算找出来了。

  但是如果这个 Bug 是在事件回调函数或者 XHR 回调函数上，就得结合 DOM 事件断点和 XHR 断点 进一步往上找哪个函数出错。

  另外，如果是发给服务器请求没有得到正确的 response，可以通过 Network 面板查看请求的参数、Cookie、HTTP 头是否有误。

  补充断点调试：

  F8，跳到下一个断点

  F10，跳过当前方法（如果执行到一个自定义方法，不进入方法内部）

  F11，进入当前方法（如果当前方法是一个自定义方法，进入方法内部）

  SHIFT+F11 跳出当前方法

  
  

  2、console.log调试：（简单粗暴）

  替代了alert，可以在控制台直接输出，在通过ajax请求后台数据时，必用console.log(data)去看数据。还有console.group/console.groupEnd 可以将 log 信息分组展示，看起来更舒服；console.warn/console.error 可以输出 warning 和 error log等。

  
  

  3. console 中执行的代码可断点

  在 console 中输入代码的最后一行加上 //@ sourceURL=filename.js, 会在 Scripts 面板中有个叫 filename.js 的文件, 然后他就和外部 js 文件一样了。

  
  

  4、实时修改 js 代码生效

  页面外部 js 文件在 Scripts 面板中可以直接修改, 改完后按 ctrl + S 保存, 会立即生效（注：html里的js和经过“{}”格式化的脚本不支持修改）

  
  

  5、断点

  使用debugger语句可以在源代码中增加断点。一旦到达debugger语句，执行中断。当前作用域的上下文出现在控制台中，还有所有的局部变量和全局变量。将鼠标光标移到变量上可以查看变量的值。

  在代码中还可以创建条件断点：

  if (condition) {

  debugger;

  }

  还可以根据自己需要在开发者工具中插入断点和条件断点。在Chrome开发者工具中，在Sources视图中点击行号即可增加断点。如果在断点上点击右键并选择“编辑断点（Edit Breakpoint）”，你还可以增加断点条件。

  
  

  6、节点变化的断点

  如果你的任务是调试垃圾代码，你可能会有这样的问题：为什么DOM节点在执行过程中发生了改变。Chrome开发者工具提供了一种方便的断点，可用来检测元素树中的节点变化。

  在Elements视图中，右键点击一个元素，从右键菜单中选择“Break on…”。

  DOM断点的类型可能包括：

  • 选定节点树状子目录（sub-tree）中的节点变化，

  • 选定节点的属性发生变化，

  • 节点被删除。