工具Google Chrome 浏览器开发人员工具

资料内容仅供您学习参考如有不当或者侵权请联系改正或者删除。

Google Chrome浏览器开发人员工具,让网页开发变得更轻松无论是IE 6/7的Internet Explorer Developer Toolbar或者是IE 8 自带的Developer Tools,还是Firefox的Firebug,以及Safari的Web Inspector和O pera的D ragonfly,她们的宗旨只有一个——帮助程序员方便、 更高效地进行网页开发。

作为浏览器中生力军,Google Chrome浏览器(4.0及以上版本)也自带了丰富的开发人员工具,让您能够随时随地对任何网页的CSS、 HTML和JavaScript进行实时编辑、 调试以及监控。

Google Chrome浏览器开发人员工具不但仅能帮助您诊断、 修复在网页加载、 脚本执行以及页面呈现中出现的问题,还能够帮助您最大限度地了解您的网页或网络应用程序对CPU以及内存的使用情况。

本篇教程将从以下几部分系统地讲解如何使用Google Chrome浏览器开发人员工具来帮助您的开发:

 准备工作

 如何使用元素(Ele me nts)面板

 如何使用资源(Resources)面板

 如何使用脚本(Scripts)面板

 如何使用时间轴(Timeline)面板

 如何使用剖析(Profi les)面板

 如何使用存储(Storage)面板

 如何使用审计(Audits)面板

 如何使用JavaScript控制台(Console)

准备工作

资料内容仅供您学习参考如有不当或者侵权请联系改正或者删除。

要开始使用开发人员工具,请先下载Google Chrome浏览器。 (如果您想试用最新版本的的开发人员工具,能够下载开发版或测试版(英文网页)Google Chrome浏览器。 )在Google Chrome浏览器安装完成后,您能够打开自己感兴趣的网页或网络应用程序,然后经过下面任何一种方式进入开发人员工具:

 点击位于浏览器用户界面右上角的”页面”下拉菜单,然后选择”开发人

员”→”开发人员工具”。

 右键点击网页上的任一元素,在弹出菜单中选择”审查元素”。

 在Windows或Linux操作系统上,使用Ctrl+Shift+I快捷键打开开发人员工

具(或使用Ctrl+Shift+J直接进入JavaScript控制台) 。

 在Mac上,使用Command+Option+I快捷键打开开发人员工具(或使用

Command+Option+J直接进入JavaScript控制台) 。

现在您应该已经看到开发人员工具的窗口了吧?在窗口的最上方的工具栏里排列着8个图标,分别对应不同的功能,每一个图标点击后都会打开相应的调试面板,帮助您获取各种不同的信息,如DOM树、 资源占用情况、 页面相关的脚本等。经过Ctrl+[和Ctrl+]键,能够在这些项之间进行切换。工具栏最右方还提供了一个搜索框,方便在当前面板中进行搜索。

工具窗口下部的按钮能够让调试窗口停靠到主窗口内,切换JavaScript控制台状态,以及其它一些功能。当然您也能够使用Esc键来更快地切换JavaScript控制台状态。直接点击控制台图标会使控制台调试界面会占据了整个开发工具窗口。窗口右下角显示的是错误和警告计数,点击它们也会打开控制台。

资料内容仅供您学习参考如有不当或者侵权请联系改正或者删除。

接下来的单元,让我们一起来一一分解这些图标所对应面板具有的强大功能吧!元素(Elements)面板

在元素(Elements)面板中,能够看到整个页面的DOM树结构和每个元素的所有属性,同时也能够实时地修改这些元素及其属性,并能够实时看到修改后的效果。

我们这里以Google简体中文首页为例,鼠标右键单击”Google搜索”按钮,选择”审查元素”,您会看到如下的窗口界面(注:此处使用的内嵌工具窗口模式,如您的工具窗口为独立窗口模式,可经过点击窗口左下方的”停靠”图标将其变为内嵌模式) :

资料内容仅供您学习参考如有不当或者侵权请联系改正或者删除。

在工具窗口右侧,显示的是被选元素的样式信息,如有兴趣,能够尝试经过双击现有属性来修改该元素的s tyle属性或应用的某个选择器中的属性值,也能够经过取消勾选的方式去掉一些属性,同时观察页面的实时变化。那怎样给现有的元素或者选择器增加一个属性值呢?不用着急,鼠标双击您所想修改的元素的element.style部分或者它应用的选择器的空白部分(如下图所示) ,即可添加属性。需要注意的是,添加任何属性都必须以分号结束。

拖动工具窗口最右侧的滚动条,在展开的Styles模块下方还有Metrics、 Properties、Event Listeners几大模块。Metrics模块以图形方式展示出左侧面板中选中元素的盒模型并标出了各部分的详细数值,在调试页面布局问题时,这样的展示方式往往更直观、更清晰。

资料内容仅供您学习参考如有不当或者侵权请联系改正或者删除。

向上拖动工具窗口中部的滚动条,找到”图片”元素,点击后,可看到在页面上相应的元素被选中,这时我们将工具窗口右侧的滚动条拖到最下方,展开Event Listeners中个各项,可看到这个链接(元素)的相关事件监听函数。经过Event Listeners项右侧的”齿轮”图标,您能够选择是只显示选中节点上的注册的事件,还是显示整个事件流中所有注册的事件。

资料内容仅供您学习参考如有不当或者侵权请联系改正或者删除。

点击工具窗口左下角的放大镜图标可进入”审查模式”,选中后,放大镜变为蓝色,这时随鼠标在主窗口的页面中的移动,你会看到相应的元素被高亮标识出来,点击后,工具窗口会显示选中元素的DOM节点信息。

另外值得注意的一点是,在Google Chrome浏览器开发人员工具里,所有脚本和样式表是按语法着色的,调试起来更加清晰。

资源(Re s o u rce s)面板

在资源面板中,你能够看到从网络上下载的所有资源。打开资源面板的时候,您一般会看到如下的界面:

资料内容仅供您学习参考如有不当或者侵权请联系改正或者删除。

由于资源跟踪会对性能产生一定影响,能够选择只对本次会话进行追踪还是对所有会话都进行资源跟踪。

选择好后点击启用资源追踪( ”Enable resource tracking”)按钮,你会看到如下的状态:

资料内容仅供您学习参考如有不当或者侵权请联系改正或者删除。

这是加载此网页使用网络资源的时间表。每个水平的棒状图示代表一个资源占用网络的时间,而在每个棒状图示的左侧颜色较浅的部分代表延迟时间(Latency) ,即从向服务器发出请求到服务器第一次响应之间的时长。 鼠标移至棒状图示上,可看到每个部分所花销的精确时间。

图中蓝色和红色的两条垂直线分别代表DOMContent加载完成和Load事件被触发的时间点。在了解了网页各部分加载所花费的的时间后,您能够进行有效改进从而提高网站的效率。

位于时间表上方的轴,列出了可供选择的不同类型的资源,您能够选择查看所有资源,或仅查看某一类的资源。

经过时间表下方的下拉菜单,你能够指定排序方式。同时您还能够经过下拉菜单左侧的”列表”选择使用宽行或窄行的方式来查看所有资源的信息。

资料内容仅供您学习参考如有不当或者侵权请联系改正或者删除。

点击左侧工具栏的Size图标,能够看到下载的各项资源的大小。