您所在的位置：
　　是一款十分流行的搜索引擎工具。很多人都喜欢用google浏览器，那么谷歌浏览器有哪几种开发工具?下边详细介绍一下Google Chrome开发者工具的使用。
　　只要安装了谷歌浏览器，就可以使用Google Chrome开发者工具了，Google Chrome开发者工具是内嵌到浏览器的开发工具。
　　打开方式有两种：第一&按F12&，第二：shift+ctrl+i。
　　一、Console介绍
　　Console可以查看网页运行后提示的消息，错误或者警告以及输出内容等，网页后台可以使用Console.debug(&输出内容&);来在Console输出显示，可以做到调试的作用吧，不过一般真正调试不是拿Console。console.debug(&Console使用介绍&);console是小写形式，不然提示没有Console。
　　二、Resources介绍
　　Resources里可以查看web程序跑起来后所加载的一些资源(Resources)，包括图片或者其他&值&，以及Cookies的值。
　　三、Sources介绍
　　Sources可以查看运行的脚本，调试一般都是在Sources调试的，所以程序开发者需要了解和熟悉Sources的使用。
　　四、Sources调试使用
　　在左侧的脚本代码编号，鼠标点击即可添加断点，添加断点后，刷新网页，程序运行到断点即可看到断点调式的状态了，具体调试需要在自己想查看某个方法里边是否有问题，一步步排除，效果很好。
　　五、NetWork介绍
　　NetWork可以看到网页加载的脚本和资源的时间，还可以看到某些不能加载成功的资源;这里有位是百度首页演示，百度首页内容很干净所以不需要加载什么图片等资源。
　　六、Elements介绍
　　Elements这个就比如页面的每个元素吧，比如百度搜索这个图片，可以通过Elements找到，搜索框也可以，在底下的&放大镜&类似的控件，点击然后选择自己想要查看要素或位置，Elements会跳转到相应的实现代码。
　　注意事项：谷歌浏览器建议使用Ctrl+R刷新页面，可以将修改的js和html代码无误快速更新。
天极下载()成...
电脑软件排行
移动软件排行
Android应用
天极大视野
京公网安备84号Chrome 开发工具 15 个必须知道的技巧(动图)_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
Chrome 开发工具 15 个必须知道的技巧(动图)
|0|0|暂无简介
W3Cschool（）最大的技术知...|
总评分0.0|
阅读已结束，如果下载本文需要使用0下载券
想免费下载更多文档？
定制HR最喜欢的简历
下载文档到电脑，查找使用更方便
还剩5页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢[转载]Google&Chrome浏览器开发工具详细教程--Chrome
Chrome浏览器出来之前，我一直使用FireFox，因为FireFox的插件非常丰富，更因为FireFox有强大的Firebug，对于前端开发可谓神器。
在Chrome出来的时候，我就喜欢上它的简洁、快速，无论是启动速度还是页面解析速度还是Javascript执行速度（现在的FireFox4也比之前的FireFox3有很大的进步）。不过当时由于Chrome的开发者工具还不是很完善，而我又不是很熟悉，加之对于Firebug的好感和依赖，当时还是用回FireFox作为我的主浏览器。
后来由于开发Chrome的插件（现在的FaWave），就一直使用Google
Chrom作为我的主浏览器，渐渐熟悉Chrome的开发者工具，而Chrome也一直在快速迭代，快速进步中，到现在，Chrome已经绝对成为我的主浏览器，Chrome的开发者工具，我也认为比Firebug更好用。
得益于Google
V8的快速，和对HTML5和CSS3的支持也算比较完善，html类的富客户端应用Chrome上无论是流畅性还是呈现的效果，都是比较出色的，这对于开发者，特别是对于那些喜欢研究前沿技术的前端开发者来说，是很重要的。
对于本文，作为一个Web开发人员，除了上面的原因以外，与我们开发相关的，就是Chrome的开发者工具。而本文，就是要详细说说Chrome的开发者工具，说说我为什么认为它比Firebug要好用。
怎样打开Chrome的开发者工具？
你可以直接在页面上点击右键，然后选择审查元素：
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/.png" BORDER="0" WIDTH="222" HEIGHT="223" STYLE="border: 1px solid rgb(153, 153, 153); display: inline-"
ALT="[转载]Google&Chrome浏览器开发工具详细教程--Chrome"
TITLE="[转载]Google&Chrome浏览器开发工具详细教程--Chrome" />
或者在Chrome的工具中找到：
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/.png" BORDER="0" WIDTH="549" HEIGHT="415" STYLE="border: 1px solid rgb(153, 153, 153); display: inline-" NAME="image_operate_87048"
ALT="[转载]Google&Chrome浏览器开发工具详细教程--Chrome"
TITLE="[转载]Google&Chrome浏览器开发工具详细教程--Chrome" />
或者，你直接记住这个快捷方式： Ctrl+Shift+I （或者Ctrl+Shift+J直接打开控制台），或者直接按F12。
打开的开发者工具就长下面的样子：
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/.png" BORDER="0" WIDTH="527" HEIGHT="313" STYLE="border: 1px solid rgb(153, 153, 153); display: inline-" NAME="image_operate_88376"
ALT="[转载]Google&Chrome浏览器开发工具详细教程--Chrome"
TITLE="[转载]Google&Chrome浏览器开发工具详细教程--Chrome" />
不过我一般习惯与点左下角的那个按钮，将开发者工具弹出作为一个独立的窗口：
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/.png" BORDER="0" WIDTH="557" HEIGHT="264" STYLE="border: 1px solid rgb(153, 153, 153); display: inline-"
ALT="[转载]Google&Chrome浏览器开发工具详细教程--Chrome"
TITLE="[转载]Google&Chrome浏览器开发工具详细教程--Chrome" />
下面来分别说下每个Tab的作用。
Elements标签页
这个就是查看、编辑页面上的元素，包括HTML和CSS：
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/.png" BORDER="0" WIDTH="587" HEIGHT="861" STYLE="border: 1px solid rgb(153, 153, 153); display: inline-"
ALT="[转载]Google&Chrome浏览器开发工具详细教程--Chrome"
TITLE="[转载]Google&Chrome浏览器开发工具详细教程--Chrome" />
左侧就是对页面HTML结构的查看与编辑，你可以直接在某个元素上双击修改元素的属性，或者你点右键选“Edit as
Html”直接对元素的HTML进行编辑，或者删除某个元素，所有的修改都会即时在页面上得到呈现。（注：看到上面右键菜单的最后一个选项“审查元素”了么？这是不是说明这个开发者工具的页面也是HTML来的呢？你点一下就知道了哦，嘿嘿）
你还可以对某个元素进行监听，在JS对元素的属性或者HTML进行修改的时候，直接触发断点，跳转到对改元素进行修改的JS代码处：
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/.png" BORDER="0" WIDTH="399" HEIGHT="266" STYLE="border: 1px solid rgb(153, 153, 153); display: inline-"
ALT="[转载]Google&Chrome浏览器开发工具详细教程--Chrome"
TITLE="[转载]Google&Chrome浏览器开发工具详细教程--Chrome" />
Elements标签页的右侧可以对元素的CSS进行查看与编辑修改：
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/.png" BORDER="0" WIDTH="387" HEIGHT="181" STYLE="border: 1px solid rgb(153, 153, 153); display: inline-"
ALT="[转载]Google&Chrome浏览器开发工具详细教程--Chrome"
TITLE="[转载]Google&Chrome浏览器开发工具详细教程--Chrome" />
你还可以通过这里看到各CSS选择器设置的CSS值的覆盖情况。
下面的Metrics可以看到元素占的空间情况（宽、高、Padding、Margin神马的）：
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/.png" BORDER="0" WIDTH="330" HEIGHT="844" STYLE="border: 1px solid rgb(153, 153, 153); display: inline-"
ALT="[转载]Google&Chrome浏览器开发工具详细教程--Chrome"
TITLE="[转载]Google&Chrome浏览器开发工具详细教程--Chrome" />
注意到上面的Properties没有？这个很有用哦，可以让你看到元素具有的方法与属性，比查API手册要方便得多哦（要注意某些方法和属性在IE、FireFox等其他浏览器下面的支持情况哦）。
Resources标签页
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/.png" BORDER="0" WIDTH="579" HEIGHT="312" STYLE="border: 1px solid rgb(153, 153, 153); display: inline-"
ALT="[转载]Google&Chrome浏览器开发工具详细教程--Chrome"
TITLE="[转载]Google&Chrome浏览器开发工具详细教程--Chrome" />
Resources标签页可以查看到请求的资源情况，包括CSS、JS、图片等的内容，同时还可以查看到存储相关的如Cookies、HTML5的Database和LocalStore等，你可以对存储的内容编辑和删除。
这里的CSS文件有一个好玩的特性，你可以直接修改CSS文件，并且修改即时生效哦：
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/.png" BORDER="0" WIDTH="546" HEIGHT="349" STYLE="border: 1px solid rgb(153, 153, 153); display: inline-"
ALT="[转载]Google&Chrome浏览器开发工具详细教程--Chrome"
TITLE="[转载]Google&Chrome浏览器开发工具详细教程--Chrome" />
Network标签页
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/.png" BORDER="0" WIDTH="542" HEIGHT="388" STYLE="border: 1px solid rgb(153, 153, 153); display: inline-"
ALT="[转载]Google&Chrome浏览器开发工具详细教程--Chrome"
TITLE="[转载]Google&Chrome浏览器开发工具详细教程--Chrome" />
Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用，特别是在查看Ajax类请求的时候，非常有帮助。注意是在你打开Chrome开发者工具后发起的请求，才会在这里显示的哦。
点击左侧某一个具体去请求URL，可以看到该请求的详细HTTP请求情况：
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/.png" BORDER="0" WIDTH="571" HEIGHT="552" STYLE="border: 1px solid rgb(153, 153, 153); display: inline-"
ALT="[转载]Google&Chrome浏览器开发工具详细教程--Chrome"
TITLE="[转载]Google&Chrome浏览器开发工具详细教程--Chrome" />
我们可以在这里看到HTTP请求头、HTTP响应头、HTTP返回的内容等信息，对于开发、调试，都是很有用的。
Scripts标签页
很明显，这个标签页就是查看JS文件、调试JS代码的，直接看下图的说明：
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/.png" BORDER="0" WIDTH="586" HEIGHT="379" STYLE="border: 1px solid rgb(153, 153, 153); display: inline-"
ALT="[转载]Google&Chrome浏览器开发工具详细教程--Chrome"
TITLE="[转载]Google&Chrome浏览器开发工具详细教程--Chrome" />
还有你可以打开Javascript控制台，做一些其他的查看或者修改：
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/.png" BORDER="0" WIDTH="582" HEIGHT="379" STYLE="border: 1px solid rgb(153, 153, 153); display: inline-"
ALT="[转载]Google&Chrome浏览器开发工具详细教程--Chrome"
TITLE="[转载]Google&Chrome浏览器开发工具详细教程--Chrome" />
你甚至还可以为某一XHR请求或者某一事件设置断点：
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/.png" BORDER="0" WIDTH="294" HEIGHT="499" STYLE="border: 1px solid rgb(153, 153, 153); display: inline-"
ALT="[转载]Google&Chrome浏览器开发工具详细教程--Chrome"
TITLE="[转载]Google&Chrome浏览器开发工具详细教程--Chrome" />
Timeline标签页
注意这个Timeline的标签页不是指网络请求的时间响应情况哦（这个在Network标签页里查看），这个Timeline指的JS执行时间、页面元素渲染时间：
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/.png" BORDER="0" WIDTH="539" HEIGHT="370" STYLE="border: 1px solid rgb(153, 153, 153); display: inline-"
ALT="[转载]Google&Chrome浏览器开发工具详细教程--Chrome"
TITLE="[转载]Google&Chrome浏览器开发工具详细教程--Chrome" />
点击底部的Record就可以开始录制页面上执行的内容。（这个不熟悉，请参考文末链接）
Profiles标签页
这个主要是做性能优化的，包括查看CPU执行时间与内存占用：
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/.png" BORDER="0" WIDTH="543" HEIGHT="221" STYLE="border: 1px solid rgb(153, 153, 153); display: inline-"
ALT="[转载]Google&Chrome浏览器开发工具详细教程--Chrome"
TITLE="[转载]Google&Chrome浏览器开发工具详细教程--Chrome" />
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/.png" BORDER="0" WIDTH="533" HEIGHT="363" STYLE="border: 1px solid rgb(153, 153, 153); display: inline-"
ALT="[转载]Google&Chrome浏览器开发工具详细教程--Chrome"
TITLE="[转载]Google&Chrome浏览器开发工具详细教程--Chrome" />
这个也不熟悉，不多说，还是请参考文末链接吧。
Audits标签页
这个对于优化前端页面、加速网页加载速度很有用哦（相当与Yslow）：
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/.png" BORDER="0" WIDTH="542" HEIGHT="262" STYLE="border: 1px solid rgb(153, 153, 153); display: inline-"
ALT="[转载]Google&Chrome浏览器开发工具详细教程--Chrome"
TITLE="[转载]Google&Chrome浏览器开发工具详细教程--Chrome" />
点击run按钮，就可以开始分析页面，分析完了就可以看到分析结果了：
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/.png" BORDER="0" WIDTH="502" HEIGHT="515" STYLE="border: 1px solid rgb(153, 153, 153); display: inline-"
ALT="[转载]Google&Chrome浏览器开发工具详细教程--Chrome"
TITLE="[转载]Google&Chrome浏览器开发工具详细教程--Chrome" />
它甚至可以分析出页面上样式表中有哪些CSS是没有被使用的哦：
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/.png" BORDER="0" WIDTH="544" HEIGHT="450" STYLE="border: 1px solid rgb(153, 153, 153); display: inline-"
ALT="[转载]Google&Chrome浏览器开发工具详细教程--Chrome"
TITLE="[转载]Google&Chrome浏览器开发工具详细教程--Chrome" />
Console标签页
就是Javascript控制台了：
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/.png" BORDER="0" WIDTH="570" HEIGHT="255" STYLE="border: 1px solid rgb(153, 153, 153); display: inline-"
ALT="[转载]Google&Chrome浏览器开发工具详细教程--Chrome"
TITLE="[转载]Google&Chrome浏览器开发工具详细教程--Chrome" />
这个除了查看错误信息、打印调试信息（console.log（））、写一些测试脚本以外，还可以当作Javascript
API查看用。
例如我想查看console都有哪些方法和属性，我可以直接在Console中输入“console”并执行：
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/.png" BORDER="0" WIDTH="553" HEIGHT="520" STYLE="border: 1px solid rgb(153, 153, 153); display: inline-"
ALT="[转载]Google&Chrome浏览器开发工具详细教程--Chrome"
TITLE="[转载]Google&Chrome浏览器开发工具详细教程--Chrome" />
怎么样，一目了然了吧 ？再例如我想查看日期函数都有哪些方法：
<img src="/blog7style/images/common/sg_trans.gif" real_src ="/.png" BORDER="0" WIDTH="527" HEIGHT="442" STYLE="border: 1px solid rgb(153, 153, 153); display: inline-"
ALT="[转载]Google&Chrome浏览器开发工具详细教程--Chrome"
TITLE="[转载]Google&Chrome浏览器开发工具详细教程--Chrome" />
（注：注意在这里看到的某些方法和属性是ES5新增的，记得兼容其他浏览器的支持情况哦）
Chrome除了简洁、快速，现在的Chrome的插件也非常的丰富了。而对于web开发者来说，Chrome对于HTML5、CSS3等一些新标准的支持也是比较完善的，而且Chrome的开发者工具我个人认为真的非常好用，这就是为什么我向web开发者推荐使用Chrome的原因。
注1：本文截图的Chrome版本为：13.0.782.215 m
注2：Chrome开发者工具更详细的说明请参考：/intl/zh-CN/chrome/devtools/docs/overview.html
注3：本文原来想定的标题是：给那些因为Firebug而舍不得FireFox的朋友
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。在阅读下面内容之前，那么些简单的了解浏览器开发者工具到底是什么东西，到底有什么用途。
浏览器开发者工具到底是什么？
其实简单的说，浏览器开发者工具就是给专业的web应用和网站开发人员使用的工具，当然只要你有兴趣想要了解，只要你对这个世界充满这好奇，什么东西你都可以了解。
开发者工具到底有什么用？
它的作用在于，帮助开发人员对网页进行布局，比如HTML+CSS，帮助前端工程师更好的调试脚本（JavaScript、jQuery）之类的，还可以使用工具查看网页加载过程，获取网页请求（这个过程也叫做抓包），抓包是非常有意思的过程，而每一个浏览器厂商生产出来的浏览器都会有自己的杀手锏，也就是功能上的差别，那么这个时候你就找一个最适合自己的浏览器使用就可以，接下来就是介绍我常用的三个浏览器。
一、谷歌浏览器chrom
一般在windows系统上浏览器开发者工具打开都是按F12快捷键，但是今天我是用mac进行讲解的。
那么上面的这张图就是打开chrom浏览器工具的方式，也可以通过快捷键打开
上面这张图就是打开chrom开发者工具之后的样子，现在简单的介绍：
第一个框：是用于屏幕适配的，也就是传说中的chrom能够调试各种移动设备的屏幕分辨率。
上面这张图就是点击之后的效果，用于移动设备屏幕适配的功能
Element标签：该标签使用来查看页面的HTML标签元素的，能够也就是查看源码，我们可以看到布局，可以看到用到的样式，还有用到的链接等等。
console标签：这个就是一个web控制台
sources标签：这个是显示资源文件的
1.该选择框使用来选择资源的，当网页被加载的时候向服务器端请求出来的文件包括.html .ccs .js这样的文件。2.这个地方使用来调试js代码的地方，这个非常重要，看到行号上面有蓝色的标签，这个标签就是断电，当我们需要调试程序的时候打一个断电，然后通过3这个工具栏进行调试，那么调试过程就不详细解释，也就是打一个断电然后刷新页面程序会调到你打断点的地方，然后通过4来查看程序中变量的值什么的。3.中的标签，第一个是停止状态的按钮就是表示程序是否停止（在debug时），后面的是程序继续跳过方法，跳过下一个语句，调到上一个语句。
Network标签：这个就是抓包常用的工具
那么这个页面就是用于抓包的页面，我们需要分析页面的请求，比如模拟登陆什么的都需要去分析程序是怎么在后台执行的，接下来就，我们可以看到Headers（请求消息头）&Preview（预览）&Response（响应）&Timing（求求时间）Cookie这些东西
最上面还有一个工具栏，有一个红色的圆点和静止符号的按钮，那么这两个按钮，当为红色按钮的时候表示当前的请求不被清空（但是这里的请求是不跳转页面的请求，当跳转到新的页面，那么也会请求也会被清空），后面这个按钮就是清空请求的。
下面还有一行工具栏，这个工具栏主要是用来选择和过滤请求消息的。
再下面可以看到时间线，这个就是记录一个请求开始到结束的时间。
注意：当你需要请求到另一个页面的时候都不清空你的请求的时候需要勾选上Preserve log，同时让红色按钮显示红色
TimeLiness标签：这个就是我们上面讲的请求时间
那么后面的几个标签也不是很常用，我就不做过多的说明，现在简单的了解这些基本的入门使用知识就基本够用，我相信这些功能都用熟之后你也会知道其他的功能的。
二、火狐浏览器FireFox
通过谷歌浏览器的认识那么我们就很简单的使用火狐咯，其实在mac上我是非常喜欢火狐的，因为功能是非常的强大。
现在只讲火狐和谷歌浏览器的区别：
火狐浏览器的打开方式，这里我们选择Web控制台，当然你可以打开没一个试试，试试总是没有错的对吧，我不经意的打开了WebIDE简直就是惊呆我了，这个直接就是一个写前端的神奇没有什么好说的咯。你也可以打开试试，每一个都可以试试，这些功能真的很强大。
当打开之后，我们会发现，火狐真的给人眼前一亮的赶脚
看吧，是不是有一种眼前一亮的赶脚，反正我是有的（当然了你第一次打开的话坑定和我的不一样了，我这个是设置主题之后的效果，你也可以去设置咯）
看看，和chrom没有什么不同吧，都是那几个，而且人家是中文的，对一些看到English就发晕的同学简直是不能太有爱
功能上没什么区别，但是在我抓包的过程中发现，火狐抓包的能力真的强，我自己开始是用谷歌现在我选择使用火狐更多
那么就简单的介绍不同的地方
大家可以看上图，我觉得这个就是我不用深入研究就能知道的最大区别啦：
1、看到没有，这里列出的消息头&Cookie&响应什么的一个都不少，而且人家多了参数&安全性参数这个就不用多说了，在我们抓包分析的过程中参数绝对是非常重要的内容，所以能够直接给你展示出来，可以给你减少去分析参数的过程，那么安全性呢，不言而喻了吧。
2、我们再来看，编辑和重发&原始头&能够模拟请求，简直碉堡啦，有没有，喜欢到爆，谷歌当然也可以有，但是好像是要装插件的。
好啦，还有很多不同，但是我说啦，只要你掌握了上面所讲的这些东西，我相信你去研究其他的功能都会是小菜一碟咯。
那么我们来看看设置里面给我们提供了那些自定义功能，这个也是非常强大的功能哦
当点击图中1按钮（设置按钮）后将出现一个神奇的地方，就是这里面，这里面也有很多功能啦，可以一个一个勾选上去体验吧孩子。
注意：看到图中2没有，这个勾选上有什么作用，和Chrom中的Preserve log是一个作用，当你请求道要挑传的页面的时候如不勾选上那么你的请求会被清空，勾选上了那么就不会被清空，这样更加有力你分析问题咯。
三、Safari浏览器
Safari的开发者工具呢也很不错，但是从功能上我觉得是不能够满足我内心强大欲望的，so，我一般上网用Safari，开发调试用上面两种，上网用Safari真的是方便而且简洁。
好了简单的放上几张图让大家感受吧：
这个呢就是打开Safari开发者工具的方式，在顶部菜单栏下面开发者标签中打开显示错误控制台就可以看到下面的场景咯
上面是打开网络这个标签的，我们可以看到该有的功能是一个都没少，而且我觉得非常简洁，说真的我如果不是一个开发者，我会爱死这样的一个浏览器，简洁大方，并且用户体验非常好，没有杂七杂八的功能。想起一句话：好的产品不是还能不能扩展，而是做到没有办法再精简。
看吧这就是调试代码的地方，功能上没有什么不同，但是感觉很规范，很简洁，很友好。
如果你是入门，我相信这些已经够啦，当你熟练运用了这些功能之后我相信你自己去研究就非常容易啦
记录学习的每一步，记录每一次的成长！！！！
阅读(...) 评论()