Google_Chrome_开发人员工具详解

1、Google Chrome浏览器开发人员工具，让网页开发变得更轻松无论是 IE 6/7 的 In ternet Explorer Developer Toolbar 或者是 IE 8 自带的 Developer Tools，还是 Firefox 的 Firebug ，以及 Safari 的 Web Inspector 和 Opera的Dragonfly，他们的宗旨只有一个帮助程序员方便、更高效地进行网页开发。作为浏览器中生力军，Google Chrome 浏览器（4.0及以上版本）也自带了丰富的开发 人员工具，让您可以随时随地对任何网页的CSS、HTML和JavaScript进行实时编辑、调试

2、以及监控。Google Chrome 浏览器开发人员工具不仅仅能帮助您诊断、修复在网页加载、脚本执 行以及页面呈现中出现的问题，还可以帮助您最大限度地了解您的网页或网络应用程序对CPU以及内存的使用情况。本篇教程将从以下几部分系统地讲解如何使用Google Chrome 浏览器开发人员工具来帮助您的开发：准备工作*如何使用元素（Eleme nts） 面板如何使用资源（Resources） 面板如何使用脚本(Scripts)面板如何使用时间轴(Timeli ne) 面板如何使用剖析(Profiles)面板如何使用存储(Storage)面板如何使用审计(Audits)面板* 如何使用 JavaSc

3、ript 控制台（Co nsole）准备工作要开始使用开发人员工具，请先下载Google Chrome 浏览器。（如果您想试用最新版本的的开发人员工具，可以下载开发版或测试版（英文网页）Google Chrome 浏览器。）在Google Chrome 浏览器安装完成后，您可以打开自己感兴趣的网页或网络应用程序，然后通过下面任何一种方式进入开发人员工具：点击位于浏览器用户界面右上角的页面'下拉菜单口”，然后选择开发人员”一开'发人员工具”。右键点击网页上的任一元素，在弹出菜单中选择审查元素”。*在Windows或Linux操作系统上，使用 Ctrl+Shift+I快捷键打开开发

4、人员工 具（或使用 Ctrl+Shift+J 直接进入JavaScript控制台）。«在Mac上，使用Command+Option+1快捷键打开开发人员工具(或使用Command+Option+J 直接进入 JavaScript 控制台)。现在您应该已经看到开发人员工具的窗口了吧？在窗口的最上方的工具栏里排列着8个图标，分别对应不同的功能，每一个图标点击后都会打开相应的调试面板，帮助您获 取各种不同的信息，女口DOM树、资源占用情况、页面相关的脚本等。通过Ctrl+和Ctd+键，可以在这些项之间进行切换。工具栏最右方还提供了一个搜索框，方便在当 前面板中进行搜索。Took -肿用2

5、.im tiktjojIlesut* Feis'Jicti Sixi-pH 71 mi les工具窗口下部的按钮可以让调试窗口停靠到主窗口内，切换JavaScript控制台状态，以及其它一些功能。当然您也可以使用Esc键来更快地切换 JavaScript控制台状态。直接点击控制台图标会使控制台调试界面会占据了整个开发工具窗口。窗口右下角显示的是错误和警告计数，点击它们也会打开控制台。接下来的单元，让我们一起来一一分解这些图标所对应面板具有的强大功能吧！元素(Elements ) 面板在元素(Elements )面板中，可以看到整个页面的DOM树结构和每个元素的所有属性，同时也可以实时地

6、修改这些元素及其属性，并可以实时看到修改后的效果。我们这里以Google简体中文首页为例，鼠标右键单击 “ Google搜索”按钮，选择审 查元素”，您会看到如下的窗口界面(注：此处使用的内嵌工具窗口模式，如您的工具窗口为独立窗口模式，可通过点击窗口左下方的停靠”图标口将其变为内嵌模式)：在工具窗口右侧，显示的是被选元素的样式信息，如有兴趣，可以尝试通过双击现有属 性来修改该元素的 style属性或应用的某个选择器中的属性值，也可以通过取消勾选的方式去掉一些属性，同时观察页面的实时变化。那怎样给现有的元素或者选择器增加一 个属性值呢？不用着急， 鼠标双击您所想修改的元素的eleme nt.st

7、yle部分或者它应用的选择器的空白部分（如下图所示），即可添加属性。需要注意的是，添加任何属性都 必须以分号结束。穴茁退些堕白眯,司駅俞.kb晨邊择輯澤加第強畀“性。4, isb*dPJW的亚科真勿F書出用一4立;T , 丘可曲入痢静拝弍桂.井反甘肾（；辫索-.1, r_. : i e ；7 ci 亓 rsjrw*?.拖动工具窗口最右侧的滚动条，在展开的Styles模块下方还有 Metrics、Properties、Eve nt Liste ners 几大模块。Metrics模块以图形方式展示出左侧面板中选中元素的盒模 型并标出了各部分的详细数值，在调试页面布局问题时，这样的展示方式往往更直观

8、、 更清晰。向上拖动工具窗口中部的滚动条，找到图片”元素，点击后，可看到在页面上相应的元素被选中，这时我们将工具窗口右侧的滚动条拖到最下方，展开Eve nt Liste ners 中个各项，可看到这个链接（元素）的相关事件监听函数。通过Eve nt Liste ners 项右侧的齿轮”图标，您可以选择是只显示选中节点上的注册的事件，还是显示整个事件流中所 有注册的事件。GooqIco稈就 a* Mdi- tev.tr tmew lli* Bn«rtttr 討阳a 1 lib * ' ?Mb*At.f.q.和1*鼻|；化肿L.Et .)內厂匚1 «'i wg&

9、#174;s/irprym .',loic 15 的."工A ；dw"(i ' 1atHiMlIfry:noi>»u)X 1 t#x1 «rf< di > 丄y * CMMitT -i r>3 C?r >- V密禅ua"毗畑f趴 cn.m 牡时內 1冷亡iiat.3：i.7j -1 -J p-516 . qa i t r L1) Llaii* ED L11 tot 3 -< hnrfAfrtt. / HteA.lafCW管<Fnclik«"ftw _qi(thlE)&

10、#39; :Iasi"£&!'a> a hrfT» Bnttd >'aituu(&o| r«ufix-t<l zh CN1tabvh1u j*1 c I cimt：- i&a- htffi :'<a hr<« on4 http:yI, ne«icgw. nkMU .tai”勺费卄：昇clai- g-b|"aH -B ' aBJ*r . 4¥ i tI*亍年'ihttp f 丿 wc*ic3JMi|ri丘f问 *比d-Ego

11、g率 dfqh*no«rFuflKer |.4n4|wbnw« «>¥*w a*. D"H 1： 叱F«w* 护曰片啊 .$早Tjrt fl 6*点击工具窗口左下角的放大镜图标Q可进入 审查模式”选中后，放大镜变为蓝色,这时随鼠标在主窗口的页面中的移动，你会看到相应的元素被高亮标识出来，点击后， 工具窗口会显示选中元素的 DOM节点信息。另外值得注意的一点是，在Google Chrome浏览器开发人员工具里，所有脚本和样式表是按语法着色的，调试起来更加清晰资源（Resources ）面板在资源面板中，你可以看到从网络上下载的所有

12、资源。打开资源面板的时候，您通常会 看到如下的界面：由于资源跟踪会对性能产生一定影响，可以选择只对本次会话进行追踪还是对所有会话 都进行资源跟踪。选择好后点击启用资源追踪(“Enable resource tracking )按钮，你会看到如下的状态:这是加载此网页使用网络资源的时间表。每个水平的棒状图示代表一个资源占用网络的时间，而在每个棒状图示的左侧颜色较浅的部分代表延迟时间(Latency )，即从向服务器发出请求到服务器第一次响应之间的时长。鼠标移至棒状图示上，可看到每个部分所花销的精确时间。图中蓝色和红色的两条垂直线分别代表 DOMContent加载完成和Load事件被触发 的时间点

13、。在了解了网页各部分加载所花费的的时间后， 您可以进行有效改进从而提高 网站的效率。位于时间表上方的轴，列出了可供选择的不同类型的资源，您可以选择查看所有资源， 或仅查看某一类的资源。通过时间表下方的下拉菜单， 你可以指定排序方式。同时您还可以通过下拉菜单左侧的 列表”选择使用宽行或窄行的方式来查看所有资源的信息。Sort try Start Timef Refpome TimoSoil 如y TLm« Sort M Ouratian St* Lung点击左侧工具栏的Size图标，可以看到下载的各项资源的大小logo_c n.png 这项，我们将点击左侧各项资源，则可以看到它的详细信

14、息，例如点击 会看到：打开“ Headers标签页可以查看完整的头信息。您甚至可以直接将资源图标拖入浏览器 窗口，在浏览器中直接直接访问该项资源。脚本（Scripts ）面板在脚本面板里，您可以方便的调试 JavaScript代码。下面的图中标注了在脚本面板里 的几个主要功能：中勺蛙摒誤秆此明可减韋M 左挨聋覇的吏盘J& 土此上.斤说 雷畀口异率时 赴莓中R 土軒月可订 在或讦处&克 C启薩T.A图中的一的3个图标分别代表: 单步调试，不进入函数体内部 单步调试，进入函数体内部 跳出当前函数 设置断点后按 F5刷新，页面会在执行到断点语句处停下，如图:您可以在右侧添加所需观察的

15、变量，来进行跟踪变量值的变化，也可查看堆栈调用情况及全局变量和函数的信息，也可以将鼠标移到感兴趣的变量名上直接查看此变量当前的 值。在脚本面板中，您可能会用到以下快捷键帮助调试：Win dows/L inuxMac功能Ctrl+/F8 或 Command+/继续运行Ctrl +?F10 或 Command+?单步调试，不进入函数体内部Ctrl+;F11 或 Command+;单步调试，进入函数体内部Shift+Ctrl+;Shift+F11 或 Shift+Command+;跳出当前函数Ctrl+.Ctrl+.进入上一层调用栈Ctrl+,Ctrl+,进入下一层调用栈时间轴(Timeline )

16、面板时间轴面板为您的网页及网络应用程序做了一个详细的性能分析，告诉您载入页面的时间究竟花在哪些地方。从加载资源到解析JavaScript脚本、计算样式表及页面渲染的所有步骤，您都可以在这里看到它们消耗的时间和内存。打开时间轴面板，您会看到这样的界面:话陰记常一开蜡13录昱茅小于】5ms的记录这次我们以 Google的更多产品页 举例，看一下这个面板的功能:1. 首先，在 Google Chrome 浏览器标签页中打开： .hk/ ntl/zh-CN/optio ns/2. 如果您尚未打开开发人员工具，请按照准备工作这一章节的介绍打开开发人员工具，并切换到时间轴(Timeline )面板3. 点

17、击 开始记录”图标，您会看到圆点变为红色4. F5刷新页面，待页面载入完成后，再次点击开始记录”图标，红色圆点变为灰色，您会看到时间轴面板里记录下来的时间消耗情况：鼠标移到棒状图示上，会看到相应的事件在载入、脚本解析及渲染三步骤所花费的详细 时间：您还可以拖动上半部分区域的时间轴上的灰色竖条，设定下方详细数据区的时间范围, 如下图所示：切换到Memory行，并重新记录，可以观察页面载入的过程中每个时刻使用堆的大小。1rKDf I开旳停上CPU鬟庄杭左皤再匚隼> Dmtapcr Tach - KttszffvZ .eMriKodecMtViviVdMa/tcnf hnurks/vrun,

18、httrA剖析(Profiles )面板剖析面板由CPU分析器和堆分析器组成，它能够帮助您了解网页和网络应用程序的执 行时间和内存使用情况。 CPU分析器显示的是 JavaScript脚本里的每个函数分别占用了多少执行时间 *堆分析器显示每个 JavaScript对象所使用的内存大小通过了解资源使用分布，您就可以有效地对代码进行优化，从而提高网站的效率。我们以V8引擎基准测试页面 为例，探讨剖析面板的使用。首先在Google Chrome 浏览器中打开V8引擎基准测试页面，并打开开发人员工具 的剖析面板，您会看到如下界面：UC4U5?：: ill x xl iK It "liillM

19、Rt Eeat tmmrrfCaM rol TU p-refi lin( by pref£in< the burttm on the xt st usCet a heap snaprhcrt: by presinc the Q> buttcn m the statuf barBIlCTk|«rCAKiQl*点击开始按钮，并刷新测试页面，开始信息收集。页面重新载入完成后，浏览器在基准 测试中的得分会显示出来，这时点击按钮停止CPU使用信息收集，您会看到“ CPUPROFILES ”项目下多出一个记录，这是您此信息收集区间CPU消耗的一个详细分解记录，您从中可以看出

20、每个函数占CPU时间的百分比。如果您仅仅对 JavaScript代码中的几个函数感兴趣，您也可以选中它们，然后点击°按钮，面板中将只显示被选中函数的信息，而按钮作用恰恰相反，将只显示除选中函数以外其它函数的信 息。CPU快用信总记录请中聃甬啟商钿堆除周It；兄记录只蟲承选中的亟槪在页面载入的过程中，您可以在任意时刻点击内存信息采集按钮，获取那一时刻内存使 用状况信息。内存使用信息记录会显示在“ HEAP SNAPSHOTS项下面。剖析面板的搜索框不仅仅可进行函数名/对象名搜索，同时也支持数值（支持单位后缀，如ms/s/B/KB/MB 及 % ）查找和带比较运算符（、=、=、=、）的数

21、值查找。例如在搜索框里输入 “ 30KB，”您会看到所有大于30KB的记录条被标为浅橙色，同时左侧的内存使用记录旁也会有数字表明在这个记录中有多少条满足搜索条件的结果。堀蔚记淋中浦运搀竄參眸的*4睾存储（Storage ）面板通过存储面板，您可以与HTML 5的数据库存储和 cookie进行交互。您可以检查当前页面打开的所有数据库的内容，也可以在这些数据库中进行SQL查询。我们以Webkit演示页来简单介绍一下此面板的使用方法：1. 在Google Chrome 浏览器中打开 Webkit演示页，并打开开发人员工具的存 储面板2. 在黄色便条"中键入第一条记录”,再新建两个便条，分别

22、键入第二条记录"和第 三条记录”在存储面板中，您可以点击数据库图标，会发现此页面建立了一个名为 “ WebkitStickyNotes的表，点击此表，可查看里面所有的记录。您也可以点击数据库图标， 然后直接在右侧的命令行窗口键入 SQL语句进行查询。开 发人员工具在您键入 SQL语句时，具有自动补齐功能，使用起来非常方便。>TmH - http: /by r»t«/>ndeK. IitmlSUi-Jfn fE&T&e*LOCAL STOMtlSJIliqii 1.TBUC1：£MB I IIi41*»ElUilax1

23、拦托1T30勢2501221Z7BILT3II 鹉1*咖3127&|73rhe9S2iSIhk1514 T-m il>ftiM-Ji276tr»aft250叶121|UtLL2二承 id舉 12Tat7l(E9«eJ<t3!E16在COOKIES项下，您可以查看到该页保存的所有Cookies ，也可以通过右键菜单删除它们。审计（Audits ）面板审计面板是在 Google Chrome 浏览器5.0中新引入的模块。它可以帮助您检查网页 性能和网络利用率。打开审计面板，您将看到这样的界面：您可选择所需检测的项目或选择检查全部”(“ Select All )，”然后点击 运行”(“ Run )”按钮，开发人员工具将为您的网页生成一份详细的审计报告并给出关于网络利用及性能 优化方面的