Google Chrome调试js简单说明

    开发中，我们可能会遇到各种各样的问题，前端的，后台的，数据库的，服务器的，各式各样的问题等着我们去填坑，

所以调试js，样式也是需要了解点的，这样会事半功倍，本篇以谷歌浏览器为例。

    1.打开谷歌浏览器，然后打开调试功能栏（按快捷键F12或者ctrl+shift+j），打开后页面如下所示：

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

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

4、Sources可以用来查看页面的源文件，包括JS文件和Html文件。找到想要调试的JS代码，在代码前单击，即可设置断点。当运行JS代码时，会自动进入到断点执行。同Java调试类似，JS调试也可以单步运行、进入函数体内调试、直接运行到下一断点等，也可以选中某个变量或者表达式，右击选中 Add selected text to watches选项，就可以在右侧栏查看该变量或表达式的值了，有利于功能调试。

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