【JS学习】-利用谷歌浏览器调试JS代码（转）

谷歌浏览器是常用来调试JS代码的工具，本文主要介绍如何利用谷歌浏览器来调试JS代码，协助我们进行开发工作。 首先，打开谷歌浏览器，按快捷键F12或者ctrl+shift+j，就可以打开谷歌浏览器的开发者工具。打开后页面如下所示，下图是打开wap端百度的页面。 <img src="" alt=""> <img src="http://img.blog.csdn.net/20160621110939810?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""> 下面介绍一下开发者工具中常用的几个功能。左上角第二个选项，是用来切换手机页面的。如果我们访问的网址是手机端wap页面，则点击此按钮，就可以模拟手机进行访问了。 Network是网络工具，可以查看请求数据的状态，类型，大小，时间等，如下图。Network是在调试中常用的工具，可以查看发送的请求是否正确，返回的数据是否正常等。 <img src="http://img.blog.csdn.net/20160621111111078?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""> Sources可以用来查看页面的源文件，包括JS文件和Html文件。找到想要调试的JS代码，在代码前单击，即可设置断点。当运行JS代码时，会自动进入到断点执行。同Java调试类似，JS调试也可以单步运行、进入函数体内调试、直接运行到下一断点等。 <img src="http://img.blog.csdn.net/20160621111228376?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""> 如上图所示，右上角4个断点，分别是直接运行到下一断点、单步运行、进入函数体内运行、返回函数执行结果。对应的快捷键分别是F8、F10、F11和shift+F11。在调试时，把鼠标放在某个变量上，就可以查看该变量的运行值。 Resources可以用来查看一些存储数据，比较常用的是本地缓存Local Storage、Session缓存Session Storage和Cookies。如下图所示： <img src="http://img.blog.csdn.net/20160621111237018?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

</div>

来源：oschina

链接：https://my.oschina.net/u/4309147/blog/4213050

标签

whitespace