google浏览器开发者工具介绍(google浏览器开发者工具介绍 )（谷歌开源浏览器）_Google账号购买批发

Google应用程序的合作开发者辅助工具称心吗

对责任编辑，做为两个Web合作开发者，除下面的其原因之外，与他们合作开发有关的，是Chrome的合作开发者辅助工具。而责任编辑，是要详尽说说Chrome的合作开发者辅助工具，说说我为何指出它比Firebug要称心。

什么样关上Google应用程序的合作开发者辅助工具?

你能间接在网页上点选滑鼠，接着优先选择审核原素：

或是在Chrome的辅助工具中找出：

或是，你间接读懂这个输入框： Ctrl+Shift+I (或是Ctrl+Shift+J间接关上控制面板)，或是间接按F12。

关上的合作开发者辅助工具就长下面的模样：

但是我通常生活习惯与点右上角的这个按键，将合作开发者辅助工具弹出做为两个分立的询问处：

下面来依次说下每一Tab的促进作用。

Elements条码页

这个是查阅、撰稿网页上的原素，主要包括HTML和CSS：

右侧是对网页HTML内部结构的查阅与撰稿，你能间接在某一原素上holds修正原素的特性，或是你点滑鼠选"Edit as

Html"间接对原素的HTML展开撰稿，或是删掉某一原素，大部份的修正单厢即刻在网页上获得呈现出。(注：看见下面滑鼠工具栏的最终两个快捷键"审核原素"了么?这呢表明这个合作开发者辅助工具的网页也是HTML来的呢?你点呵呵就晓得了哦，嘿嘿)

你还能对某一原素展开窃听，在JS对原素的特性或是HTML展开修正的这时候，间接促发断点，跳转到对改原素展开修正的JS代码处：

Elements条码页的右侧能对原素的CSS展开查阅与撰稿修正：

你还可以通过这里看见各CSS优先选择器设置的CSS值的覆盖情况。

下面的Metrics能看见原素占的空间情况(宽、高、Padding、Margin神马的)：

注意到下面的Properties没有?这个很有用哦，可以让你看见原素具有的方法与特性，比查API手册要方便得多哦(要注意某些方法和特性在IE、FireFox等其他应用程序下面的支持情况哦)。

Resources条码页

Resources条码页能查阅到请求的资源情况，主要包括CSS、JS、图片等的内容，同时还能查阅到存储有关的如Cookies、HTML5的Database和LocalStore等，你能对存储的内容撰稿和删掉。

这里的CSS文件有两个好玩的特性，你能间接修正CSS文件，并且修正即刻生效哦：

Network条码页

Network条码页对分析网站请求的网络情况、查阅某一请求的请求头和响应头还有响应内容很有用，特别是在查阅Ajax类请求的这时候，非常有帮助。注意是在你关上Chrome合作开发者辅助工具后发起的请求，才会在这里显示的哦。

点选右侧某两个具体去请求URL，能看见该请求的详尽HTTP请求情况：

他们能在这里看见HTTP请求头、HTTP响应头、HTTP返回的内容等信息，对合作开发、调试，都是很有用的。

Scripts条码页

很明显，这个条码页是查阅JS文件、调试JS代码的，间接看下图的表明：

还有你能关上Javascript控制面板，做一些其他的查阅或是修正：

你甚至还能为某一XHR请求或是某一事件设置断点：

Timeline条码页

注意这个Timeline的条码页不是指网络请求的时间响应情况哦(这个在Network条码页里查阅)，这个Timeline指的JS执行时间、网页原素渲染时间：

点选底部的Record就能开始录制网页上执行的内容。(这个不熟悉，请参考文末链接)

Profiles条码页

这个主要是做性能优化的，主要包括查阅CPU执行时间与内存占用：

这个也不熟悉，不多说，还是请参考文末链接吧。

Audits条码页

这个对优化前端网页、加速网页加载速度很有用哦(相当与Yslow)：

点选run按键，就能开始分析网页，分析完了就能看见分析结果了：

它甚至能分析出网页上样式表中有哪些CSS是没有被使用的哦：

Console条码页

是Javascript控制面板了：

这个除查阅错误信息、打印调试信息(console.log())、写一些测试脚本之外，还能当作Javascript API查阅用。

例如我想查阅console都有哪些方法和特性，我能间接在Console中输入"console"并执行：

怎么样，一目了然了吧 ?再例如我想查阅日期函数都有哪些方法：

(注：注意在这里看见的某些方法和特性是ES5新增的，记得兼容其他应用程序的支持情况哦)

结语

Google

Chrome除简洁、快速，现在的Chrome的插件也非常的丰富了。而对web合作开发者来说，Chrome对HTML5、CSS3等一些新标准的支持也是比较完善的，而且Chrome的合作开发者辅助工具我个人指出真的非常称心，这是为何我向web合作开发者推荐使用Chrome的其原因。

怎么用chrome的合作开发者辅助工具·

Google Chrome合作开发者辅助工具

只要安装了Google应用程序，就能使用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会跳转到相应的实现代码