Google Chrome调试js入门

　　　　日常在开发过程当中，常常会接触到前端页面。那么对于js的调试那但是屡见不鲜，没必要多说。最近一直在用火狐的Firebug,可是不知道怎么的很差使了。网上找找说法，都说从新安装狐火浏览器就能够了，可是我安装了好多遍，也没好使，后来据说Firebug中止更　　新了。没办法既然不给用，那我换浏览器不就能够了嘛！一开始想到就是谷歌，谷歌浏览器是经常使用来调试JS代码的工具，本文主要介绍如何利用谷歌浏览器来调试JS代码，协助咱们进行开发工做，加快开发效率。

      一、首先，打开谷歌浏览器，而后打开调试功能栏，按快捷键F12或者ctrl+shift+j，就能够打开谷歌浏览器的开发者工具。打开后页面以下所示。

　　

　　二、下面主要介绍一下开发者工具中经常使用的几个基础经常使用功能。左上角第二个选项，是用来切换手机页面的。若是咱们访问的网址是手机端wap页面，则点击此按钮，就能够模拟手机进行访问了。

　　

 

　　三、Network是网络工具，能够查看请求数据的状态，类型，大小，时间等，以下图。Network是在调试中经常使用的工具，能够查看发送的请求是否正确，返回的数据是否正常等。

　　

　　四、Sources能够用来查看页面的源文件，包括JS文件和Html文件。找到想要调试的JS代码，在代码前单击，便可设置断点。当运行JS代码时，会自动进入到断点执行。同Java调试相似，JS调试也能够单步运行、进入函数体内调试、直接运行到下一断点等。

　　

 

　　五、如上图所示，右上角4个断点，分别是直接运行到下一断点、单步运行、进入函数体内运行、返回函数执行结果。对应的快捷键分别是F八、F十、F11和shift+F11。在调试时，把鼠标放在某个变量上，就能够查看该变量的运行值。