Chrome调试简介

来源：最近师弟问了我几个问题，我发现如果他会调试的话，自己就能发现，而调试确实是开发必备的技能之一，今天就总结下在工作中经常用到的调试方法。

一、找到调试的代码位置

1. 简单的情况可以通过console.log来打印看看数据是否符合预期，而console.log也支持数据格式的输出，比如%d表示数字，详情见参考文献一

• 断点调试，console.log的功能有限，不能看到函数运行时的情况。
  2.1 代码中加debugger;这种情况自己在本地开发的时候会用到，直接打断点，如果代码在本地编辑器没有，或者不是很清楚在什么位置，这时通常会用到下面这种方法
  2.2 浏览器中加断点。这种方法需要找到代码执行的位置
• ctrl + shift + f 进行全局搜索（切换到英文输入法，避免热键冲突）。如果能确定代码中会出现某些东西，可以进行全局搜索。这时编码规范就显得重要了，如果HTML中的某个元素被Js中引用了，给元素的class或者id加个钩子就显得比较重要，比如
  ，有了这个j-nav ，就知道这个元素被js引用了，全局搜索j-nav比较方便，这样就可以定位到相应的位置。
• 审查元素查看绑定的事件，也能找到相应的位置

  • 原生Js绑定的事件，比较好找

    
    
    

    事件.png

  • 如果是Jquery绑定的事件，Chrome会定位到Jquery源码中，这样的情况通过安装jquery调试插件可以解决（详情见第三章节），或者通过Firebug能定位到事件绑定的源码中

    
    
    

    chrome查看jquery绑定的事件.png
    
    
    

    firebug查看元素绑定的jquery事件.png

二、进行调试

1. 查看变量的值，这个比较简单，选中某个变量就会出现它的值，或者右键将其add to watch

• 查看作用域（包括局部变量，闭包变量以及全局变量），这个时候可以看到目前调试函数的闭包变量有哪些，对调试闭包功能非常有用

  
  
  

  作用域.png
• 循环调试
  • 循环中的调试比较繁琐，如果循环次数比较多，一点点调试到自己想要的位置的话，耗时很长，这时可以在断点的行数右键，选择edit breakpoint，输入断点的条件，可以避免循环次数太多，不停地循环调试问题。

三、其他方面

• ctrl + p查找文件(2016.8.29更正)
• source面板中，如果代码是压缩过的，点击左下角的{}，即可进行代码格式化
• network的应用，这也是经常用到的面板之一，查看网络的请求以及响应的数据，尤其是有异步请求的时候，会打开此面板查看请求的状态
• 安装chrome调试插件，具体详情可以见参考文献二

四、后续

• 本文只总结了作者在工作中经常用到的Js调试的相关方法，而关于CSS与HTML的没有总结，如果有需求，后面会写。
• 在调试的时候，一般是先看代码执行了没有，如果执行了，再就是分析为什么没有达到如期的效果，究竟是什么地方出了问题。
  • 经常犯的错误就是，obj.aa = 'bb',如果aa的属性不存在，会创建相应的属性，并且给其赋值，不会报错。如果属性aa拼写错误，Js又不报错，这时候需要细心检查拼写。
• 普通的网络请求调试通过network面板即可解决，但想要更多的功能，比如修改响应的数据等，这时一般需要用到抓包工具，比如fiddler，如果有需求，后面会专门写文章来介绍此工具在工作中的应用
• chrome调试工具官方文档

五、最后

作者水平有限，成文仓促，如果错误或者问题请及时提出，虚心接纳各方的意见。