《Google Chrome 浏览器开发人员工具12863.docx》由会员分享,可在线阅读,更多相关《Google Chrome 浏览器开发人员工具12863.docx(25页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、Google Chrome 浏览器开发人员工具,让网页开发变得更轻松无论是 IIE 6/7 的 Intterneet Exxplorrer DDevelloperr Tooolbarr 或者是是 IE 8 自带带的 Deevelooper Toolls,还是是 Firrefoxx 的 Firrebugg ,以及及 Saffari 的 Webb Insspecttor 和和 Opeera 的的 Draagonffly,他他们的宗旨旨只有一个个帮助程程序员方便便、更高效效地进行网网页开发。作为浏览器器中生力军军,Gooogle Chroome 浏浏览器 (4.0及及以上版本本) 也自带带了丰富的的
2、开发人员员工具,让让您可以随随时随地对对任何网页页的 CSSS、 HTMML 和 JavvaScrript 进行实时时编辑、调调试以及监监控。Googlle Chhromee 浏览器器开发人员员工具不仅仅仅能帮助助您诊断、修修复在网页页加载、脚脚本执行以以及页面呈呈现中出现现的问题,还还可以帮助助您最大限限度地了解解您的网页页或网络应应用程序对对CPU以及及内存的使使用情况。本篇教程将将从以下几几部分系统统地讲解如如何使用 Googgle CChromme 浏览览器开发人人员工具来来帮助您的的开发: 准备工作 如何使用元元素 (EElemeents) 面板 如何使用资资源 (RResouurc
3、ess) 面板板 如何使用脚脚本 (SScrippts) 面板 如何使用时时间轴 (Timeelinee) 面板板 如何使用剖剖析 (PProfiiles) 面板 如何使用存存储 (SStoraage) 面板 如何使用审审计 (AAuditts) 面面板 如何使用 JavaaScriipt 控控制台 (Conssole)准备工作要开始使用用开发人员员工具,请请先下载GGooglle Chhromee 浏览器器。(如果果您想试用用最新版本本的的开发人员员工具,可可以下载开开发版或测测试版(英英文网页)Google Chrome 浏览器。)在 Google Chrome 浏览器安装完成后,您可以打
4、开自己感兴趣的网页或网络应用程序,然后通过下面任何一种方式进入开发人员工具: 点击位于浏浏览器用户户界面右上上角的“页面”下拉菜单单,然后选选择“开发人员员”“开发发人员工具具”。 右键点击网网页上的任任一元素,在在弹出菜单单中选择“审查元素素”。 在 Winndowss 或 Linnux 操操作系统上上,使用CCtrl+Shifft+I快快捷键打开开开发人员员工具(或或使用Cttrl+SShiftt+J直接接进入 JJavaSScrippt 控制制台)。 在 Macc 上,使使用Commmandd+Opttion+I快捷键键打开开发发人员工具具(或使用用Commmand+Optiion+JJ
5、直接进入入 JavvaScrript 控制台)。现在您应该该已经看到到开发人员员工具的窗窗口了吧?在窗口的的最上方的的工具栏里里排列着 8 个图标,分分别对应不不同的功能能,每一个个图标点击击后都会打打开相应的的调试面板板,帮助您您获取各种种不同的信信息,如 DOM 树、资源源占用情况况、页面相相关的脚本本等。通过过 Ctrrl+ 和 Ctrrl+ 键,可以以在这些项项之间进行行切换。工工具栏最右右方还提供供了一个搜搜索框,方方便在当前前面板中进进行搜索。工具窗口下下部的按钮钮可以让调调试窗口停停靠到主窗窗口内,切切换 JaavaSccriptt 控制台台状态,以以及其它一一些功能。当当然您也
6、可可以使用 Esc 键来更快快地切换 JavaaScriipt 控控制台状态态。直接点点击控制台台图标会使使控制台调调试界面会会占据了整整个开发工工具窗口。窗窗口右下角角显示的是是错误和警警告计数,点点击它们也也会打开控控制台。接下来的单单元,让我我们一起来来一一分解解这些图标标所对应面面板具有的的强大功能能吧!元素(Ellemennts)面面板在元素(EElemeents)面面板中,可可以看到整整个页面的的 DOMM 树结构构和每个元元素的所有有属性,同同时也可以以实时地修修改这些元元素及其属属性,并可可以实时看看到修改后后的效果。我们这里以以Googgle 简简体中文首首页为例,鼠鼠标右键
7、单单击“ GGooglle 搜索索” 按钮,选选择“审查元素素”,您会看看到如下的的窗口界面面(注:此此处使用的的内嵌工具具窗口模式式,如您的的工具窗口口为独立窗窗口模式,可可通过点击击窗口左下下方的“停靠” 图标将其变变为内嵌模模式):在工具窗口口右侧,显显示的是被被选元素的的样式信息息,如有兴兴趣,可以以尝试通过过双击现有有属性来修修改该元素素的 sttyle 属性或应应用的某个个选择器中中的属性值值,也可以以通过取消消勾选的方方式去掉一一些属性,同同时观察页页面的实时时变化。那那怎样给现现有的元素素或者选择择器增加一一个属性值值呢?不用用着急,鼠鼠标双击您您所想修改改的元素的的elemm
8、ent.stylle部分或或者它应用用的选择器器的空白部部分(如下下图所示),即即可添加属属性。需要要注意的是是,添加任任何属性都都必须以分分号结束。拖动工具窗窗口最右侧侧的滚动条条,在展开开的 Sttyless 模块下下方还有 Metrrics、Proppertiies、Evennt Liistenners 几大模块块。Mettricss 模块以以图形方式式展示出左左侧面板中中选中元素素的盒模型型并标出了了各部分的的详细数值值,在调试试页面布局局问题时,这这样的展示示方式往往往更直观、更更清晰。向上拖动工工具窗口中中部的滚动动条,找到到“图片”元素,点点击后,可可看到在页页面上相应应的元素被
9、被选中,这这时我们将将工具窗口口右侧的滚滚动条拖到到最下方,展展开 Evvent Listtenerrs 中个个各项,可可看到这个个链接(元元素)的相相关事件监监听函数。通通过 Evvent Listtenerrs 项右右侧的“齿轮”图标,您您可以选择择是只显示示选中节点点上的注册册的事件,还还是显示整整个事件流流中所有注注册的事件件。点击工具窗窗口左下角角的放大镜镜图标可进进入“审查模式式”,选中后后,放大镜镜变为蓝色色,这时随随鼠标在主主窗口的页页面中的移移动,你会会看到相应应的元素被被高亮标识识出来,点点击后,工工具窗口会会显示选中中元素的 DOM 节点信息息。另外值得注注意的一点点是,
10、在 Googgle CChromme 浏览览器开发人人员工具里里,所有脚脚本和样式式表是按语语法着色的的,调试起起来更加清清晰。资源(Reesourrces)面面板在资源面板板中,你可可以看到从从网络上下下载的所有有资源。打打开资源面面板的时候候,您通常常会看到如如下的界面面:由于资源跟跟踪会对性性能产生一一定影响,可可以选择只只对本次会会话进行追追踪还是对对所有会话话都进行资资源跟踪。选择好后点点击启用资资源追踪(“Enable resource tracking”)按钮,你会看到如下的状态:这是加载此此网页使用用网络资源源的时间表表。每个水水平的棒状状图示代表表一个资源源占用网络络的时间,
11、而而在每个棒棒状图示的的左侧颜色色较浅的部部分代表延延迟时间(Latency),即从向服务器发出请求到服务器第一次响应之间的时长。鼠标移至棒状图示上,可看到每个部分所花销的精确时间。图中蓝色和和红色的两两条垂直线线分别代表表DOMCConteent加载载完成和 Loadd 事件被被触发的时时间点。在在了解了网网页各部分分加载所花花费的的时间后,您您可以进行行有效改进进从而提高高网站的效效率。位于时间表表上方的轴轴,列出了了可供选择择的不同类类型的资源源,您可以以选择查看看所有资源源,或仅查查看某一类类的资源。通过时间表表下方的下下拉菜单,你你可以指定定排序方式式。同时您您还可以通通过下拉菜菜单
12、左侧的的“列表”选择使用用宽行或窄窄行的方式式来查看所所有资源的的信息。点击左侧工工具栏的 Sizee 图标,可可以看到下下载的各项项资源的大大小。点击左侧各各项资源,则则可以看到到它的详细细信息,例例如点击 logoo_cn.png 这项,我我们将会看看到:打开“ HHeadeers ”标签页可以查看完整的头信息。您甚至可以直接将资源图标拖入浏览器窗口,在浏览器中直接直接访问该项资源。脚本(Sccriptts)面板板在脚本面板板里,您可可以方便的的调试 JJavaSScrippt 代码码。下面的的图中标注注了在脚本本面板里的的几个主要要功能:图中的的3个图标分分别代表:单步调试试,不进入入函
13、数体内内部单步调试试,进入函函数体内部部跳出当前前函数设置断点后后按 F55 刷新,页页面会在执执行到断点点语句处停停下,如图图:您可以在右右侧添加所所需观察的的变量,来来进行跟踪踪变量值的的变化,也也可查看堆堆栈调用情情况及全局局变量和函函数的信息息,也可以以将鼠标移移到感兴趣趣的变量名名上直接查查看此变量量当前的值值。在脚本面板板中,您可可能会用到到以下快捷捷键帮助调调试:Windoows/LLinuxxMac功能Ctrl+/F8 或 Commmand+/继续运行Ctrl+F10 或或 Commmandd+单步调试,不不进入函数数体内部Ctrl+;F11 或或 Commmandd+;单步调
14、试,进进入函数体体内部Shiftt+Ctrrl+;Shiftt+F111 或Shifft+Coommannd+;跳出当前函函数Ctrl+.Ctrl+.进入上一层层调用栈Ctrl+,Ctrl+,进入下一层层调用栈 时间轴(TTimelline)面面板时间轴面板板为您的网网页及网络络应用程序序做了一个个详细的性性能分析,告告诉您载入入页面的时时间究竟花花在哪些地地方。从加加载资源到到解析 JJavaSScrippt 脚本本、计算样样式表及页页面渲染的的所有步骤骤,您都可可以在这里里看到它们们消耗的时时间和内存存。打开时间轴轴面板,您您会看到这这样的界面面:这次我们以以 Gooogle 的更多产品品
15、页举例,看看一下这个个面板的功功能:1. 首先,在 Googgle CChromme 浏览览器标签页页中打开:httpp:/wwww.ggooglle.coom.hkk/inttl/zhh-CN/optiions/2. 如果您尚未未打开开发发人员工具具,请按照照准备工作作这一章节节的介绍打打开开发人人员工具,并并切换到时时间轴(TTimelline)面面板3. 点击“开始始记录”图标,您您会看到圆圆点变为红红色4. F5 刷新新页面,待待页面载入入完成后,再再次点击“开始记录录”图标,红红色圆点变变为灰色,您您会看到时时间轴面板板里记录下下来的时间间消耗情况况:鼠标移到棒棒状图示上上,会看到到
16、相应的事事件在载入入、脚本解解析及渲染染三步骤所所花费的详详细时间:您还可以拖拖动上半部部分区域的的时间轴上上的灰色竖竖条,设定定下方详细细数据区的的时间范围围,如下图图所示:切换到 MMemorry 行,并并重新记录录,可以观观察页面载载入的过程程中每个时时刻使用堆堆的大小。剖析(Prrofilles)面面板剖析面板由由 CPUU 分析器器和堆分析器器组成,它它能够帮助助您了解网网页和网络络应用程序序的执行时时间和内存存使用情况况。 CPU 分分析器显示示的是 JJavaSScrippt 脚本本里的每个个函数分别别占用了多多少执行时时间 堆分析器显显示每个 JavaaScriipt 对对象所
17、使用用的内存大大小通过了解资资源使用分分布,您就就可以有效效地对代码码进行优化化,从而提提高网站的的效率。我我们以V88 引擎基基准测试页页面为例,探探讨剖析面面板的使用用。首先在在 Gooogle Chroome 浏浏览器中打打开V8 引擎基准准测试页面面,并打开开开发人员员工具的剖剖析面板,您您会看到如如下界面:点击开始按按钮,并刷刷新测试页页面,开始始信息收集集。页面重重新载入完完成后,浏浏览器在基基准测试中中的得分会会显示出来来,这时点点击按钮停停止 CPPU 使用用信息收集集,您会看看到“ CCPU PPROFIILES ”项目下下多出一个个记录,这这是您此信信息收集区区间 CPPU
18、 消耗耗的一个详详细分解记记录,您从从中可以看看出每个函函数占CPPU时间的的百分比。如果您仅仅对 JavaScript 代码中的几个函数感兴趣,您也可以选中它们,然后点击按钮,面板中将只显示被选中函数的信息,而按钮作用恰恰相反,将只显示除选中函数以外其它函数的信息。在页面载入入的过程中中,您可以以在任意时时刻点击内内存信息采采集按钮,获获取那一时时刻内存使使用状况信信息。内存存使用信息息记录会显显示在“ HEAPP SNAAPSHOOTS ”项下面。剖析面板的的搜索框不不仅仅可进进行函数名名/对象名搜搜索,同时时也支持数数值(支持持单位后缀缀,如 mms/s/B/KBB/MB 及 % )查查
19、找和带比比较运算符符( 、=、 )的数数值查找。例例如在搜索索框里输入入“ 330KB ”,您会会看到所有有大于300KB的记记录条被标标为浅橙色色,同时左左侧的内存存使用记录录旁也会有有数字表明明在这个记记录中有多多少条满足足搜索条件件的结果。存储(Sttoragge)面板板通过存储面面板,您可可以与 HHTML 5 的数数据库存储储和 coookiee 进行交交互。您可可以检查当当前页面打打开的所有有数据库的的内容,也也可以在这这些数据库库中进行 SQL 查询。我们以Weebkitt 演示页页来简单介介绍一下此此面板的使使用方法:1. 在 Gooogle Chroome 浏浏览器中打打开
20、Weebkitt 演示页页,并打开开开发人员员工具的存存储面板2. 在“黄色便便条”中键入“第一条记记录”,再新建建两个便条条,分别键键入“第二条记记录”和“第三条记记录” 在存储面板板中,您可可以点击数数据库图标标,会发现现此页面建建立了一个个名为“ WebkkitSttickyyNotees ”的表,点点击此表,可可查看里面面所有的记记录。您也可以点点击数据库库图标,然然后直接在在右侧的命命令行窗口口键入 SSQL 语语句进行查查询。开发发人员工具具在您键入入 SQLL 语句时时,具有自自动补齐功功能,使用用起来非常常方便。在 COOOKIESS 项下,您您可以查看看到该页保保存的所有有
21、Coookiess ,也可可以通过右右键菜单删删除它们。审计(Auuditss)面板审计面板是是在 Goooglee Chrrome 浏览器 55.0 中中新引入的的模块。它它可以帮助助您检查网网页性能和和网络利用用率。打开开审计面板板,您将看看到这样的的界面:您可选择所所需检测的的项目或选选择“检查全部部”(“ Seelectt Alll ”),然然后点击“运行”(“ Ruun ”)按按钮,开发发人员工具具将为您的的网页生成成一份详细细的审计报报告并给出出关于网络络利用及性性能优化方方面的建议议,如下图图所示,为为 Gooogle Chroome 浏浏览器开发发人员工具具为更多 Gooogl
22、ee 产品页页所生成的的审计报告告:JavaSScrippt 控制制台(Coonsolle)JavaSScrippt 控制制台可与其其它面板联联合使用,您您可以借助助它来审查查 DOMM 元素、调调试 JaavaSccriptt 代码、查查看 HTTML 解解析错误等等。我们再再次以Goooglee 简体中中文首页为为例说明 JavaaScriipt 控控制台的用用法:进入入 Gooogle Chroome 浏浏览器开发发人员工具具的元素面面板,点击击工具窗口口左下角的的第二个图图标打开 JavaaScriipt 控控制台,您您可以通过过$(ellemennt_idd) 来查查看一个 DOM
23、元素,也也可以通过过“ $N ”(n=0,1,2,.)查看最近近选中的元元素。$0 为最最近选中的的元素,$1 为前前一个选中中的元素,以以此类推:您也可以通通过insspectt()语句句获得当前前窗口或页页面中的对对象,例如如:使用iinspeect(wwindoow.naavigaator.userrAgennt) 可获得得当前浏览览器信息,而而insppect(proffileEEnd) 则会显示示proffileEEnd这个个函数:因为控制台台会帮您自自动补齐命命令、对象象名以及属属性名称等等等,所以以完全不必必担心需要要键入太多多字符或者者敲错。使用dirr() 语语句可获得得一个元素素或对象的的详细属性性,如输入入dir(gheaad),您将会会看到:dirxmml()语句的的参数如果果是函数名名,如diirxmll(proffileEEnd) ,会显示示出这个函函数,类似似于insspectt(proofileeEnd) 语句;如果参数数是元素的的 id,例例如dirrxml(gheaad) 则以 DOOM 树形形式显示出出这个元素素,相当于于$(ghhead)。本文对 GGooglle Chhromee 浏览器器开发人员员工具的主主要功能做做了一个总总结,希望望能帮助广广大的网页页工作人员员更好的利利用这套工工具解决在在网页开发发、调试阶阶段遇到的的一些问题题。
限制150内