Google Chrome调试js入门

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

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

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

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

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

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

转载于:https://www.cnblogs.com/yuanchaoyong/p/6172034.html

Google Chrome调试js入门相关推荐

Google Chrome 调试JS简单教程[更新]
题外话,刚开始我写这篇内容只是将自己了解的一些知识放上来,不巧的是我分析了我的来访日志,很多朋友都有这个需求,为了大家没有白来,我决定充实下这篇文章.最近更新时间2014-02-14 chrome版本 ...
Google Chrome 调试JS利器
我是一名忠实Chrome迷,使用它已经快有2年的历史了,整体给我的感觉就是清爽,快速,简洁.又打小广告了--^_^,虽然我知道IE8+也有调试工具,包括火狐的什么XXBUG,但是我用过之后,个人还是十 ...
Google Chrome调试js代码
你是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~, ...
vscode调试js，chrome调试js
vscode调试js,chrome调试js nodejs调试文档:nodejs调试文档三种启动调试方式: 1.vscode直接F5 2.配置launch.json,在"调试"列表 ...
chrome调试js
[原文地址:http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.html ] 在Google Chrome浏览器出来之前,我一直使用F ...
Google Chrome浏览器JS调试工具
作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.ht ...
FireBug 调试JS入门 —如何调试JS
安装就不用说了,很简单,在FireFox上插件库里找到FireBug就Ok了.下图是FireBug Debug 窗口. FireBug美工用的非常普遍,公司美工妹妹用的非常熟练呵呵,而对于我们开发人 ...
chrome调试js的小技巧
原文链接:http://www.cnblogs.com/liyunhua/p/4621937.html $ $_命令返回最近一次表达式执行的结果,功能跟按向上的方向键再回车是一样的,但它可以做为一个变 ...
Google Chrome 浏览器JS无法更新解决办法
JS无法更新原因: 浏览器为了加载快,默认是按照自定规则更新缓存,非实时更新. 我们在开发的时候,JS变动很快,需要即时让浏览器加载最新文件,也就是禁用浏览器缓存 (1)使用F12进入开发者模式,找到 ...

Google Chrome调试js入门

Google Chrome调试js入门相关推荐

最新文章

热门文章