chrome浏览器前台常用调试功能介绍

1、Chrome 浏览器常用调试功能介绍2011-1-5目录1目的32.浏览器选择32.1推荐浏览器32.2扩展功能32.2.1常用扩展42.2.2开发相关扩展43.工具使用43.1开启开发者工具43.2常用面板63.2.1大致介绍63.2.2元素面板63.2.3 js调试面板103.2.4 js控制台(console)124.参考资料151 目的通过本文档简单介绍了前台调试比较有用的开发技巧，由于我也是在学习中，我挑选了一些我认为比较有用的功能列出来。可能以前有用过firebug调试工具，差不多类似。.浏览器选择椀洀攀猀一攀眀刀漀洀愀渀推荐浏览器Chrome官方浏览器和基于chrome官方浏览器

2、开发的双核浏览器。基于国内的网站兼容性情况可以选择双核浏览器，比如360极速，枫叶浏览器，sumchrome浏览器等等。双核浏览器提供了两种浏览模式，极速和兼容模式，兼容模式将会以本地ie版本进行浏览。备注：双核浏览器只能在极速模式下才能打开浏览器开发人员工具。推荐360极速浏览器（目前双核里面稳定性最好的浏览器），下载地址：http:/ 开启开发者工具右键点击网页上的任一元素，在弹出菜单中选择审查元素返回前进复）重新羲入另存为1）一打印一翻译为中文浦体中文直看网页源代码国）查看网页信息支）审查元素国）在 Windows 或 Linux 操作系统上，使用 Ctrl+Shift+I 快捷键打开开

3、发人员工具（或使用 Ctrl+Shift+J 直接进入 JavaScript 控制台）。点击位于浏览器用户界面右上角下拉菜单，具体菜单如下图打开开发者 I 具后，如下图所示肆士龙按率手气不憎Viisdj,bitflLnr-KHE.t?1%肥一耳12K-LlrfsnLtil F比uaanE.Lq./Nu虹力lCd&CLHwrrt.jraMH) )nita1mAl).i.rcpl,Jraaiiilxrpr/nBv_3-=!fln37.pn工上adB-CBiC_1-：djB1也111!、F-qfantiLsr-1id-Bddldm-uC/fant口小“dLvCdl-iSd-ri*i-C/-d

4、lybCMHId-fiKtcribLddv1”誉脑*“/加 _AicrLpk?0 运4bodrEEtAdidiv开发者工具GoogledEiJit*llP2Lrl4flicDIrJJ*椀洀攀猀一攀眀刀漀洀愀渀常用面板备注：chrome9.0后面板增加了一个network大致介绍这里只介绍常用的面板，元素(Elements)面板、脚本(Scripts)面板其他面板功能元素面板在元素(Elements)面板中，可以看到整个页面的 DOM 树结构和每个元素的所有属性，同时也可以实时地修改这些元素及其属性，并可以实时看到修改后的效果。我们这里以 Google 简体中文首页为例,鼠标右键单击“Googl

5、e 搜索”按钮，选择审查元素：您会看到如下的窗口界面(注：此处使用的内嵌工具窗口模式，如您的工具窗口为独立窗口模式，可通过点击窗口左下方的停靠”图标口将其变为内嵌模式)：在工具窗口右侧，显示的是被选元素的样式信息，如有兴趣，可以尝试通过双击现有属性来修改该元素的 style 属性或应用的某个选择器中的属性值，也可以通过取消勾选的方式去掉一些属性，同时观察页面的实时变化。那怎样给现有的元素或者选择器增加一个属性值呢？不用着急，鼠标双击您所想修改的元素的 element.style 部分或者它应用的选择器的空白部分（如下图所示），即可添加属性。需要注意的是，添加任何属性都必须以分号结束。拖动工具窗

6、口最右侧的滚动条，在展开的 Styles 模块下方还有 Metrics、Properties、EventListeners几大模块。 Metrics模块以图形方式展示出左侧面板中选中元素的盒模型并标出了各部分的详细数值，在调试页面布局问题时，这样的展示方式往往更直观、更清晰。取击网茎白*士三青虑中亓率增比甘的巨丈性.点击塞空白区域,可敢生.kb鼻选择堀谬m的总这事性A旗更电白黄感,kb突途年41的观有耀则下会出及一个空灯.客可入所的耳式博并ar号一整向上拖动工具窗口中部的滚动条，找到图片”元素，点击后，可看到在页面上相应的元素被选中，这时我们将工具窗口右侧的滚动条拖到最下方，展开 EventL

7、isteners 中个各项，可看到这个链接（元素）的相关事件监听函数。通过 EventListeners 项右侧的齿轮”图标，您可以选择是只显示选中节点上的注册的事件，还是显示整个事件流中所有注册的事件。点击工具窗口左下角的放大镜图标 Q 可进入审查模式：选中后，放大镜变为蓝色，这时随鼠标在主窗口的页面中的移动，你会看到相应的元素被高亮标识出来，点击后，工具窗口会显示选中元素的 DOM 节点信息。日车r-lkw大通美腥努由口I I注为会员总可磔孽昼小卖中率外市、圣湖胡妣美双聿*1:曷电峰小北JV再叫流也率电损怦明1美制次71宴方力企业话才V|-|ipc#llipdKiin|i-门”丁日就1 I

8、WwrllJstylea-diwE-9V；none;Ttatiltbordw-flctlpKing-uE!ct-llpdddlnB*$11class-EritffId-nclZ-财：tilockjhT-!：Eb4Etx*trT3 的rtg-CiTM,bCtd_4ib*sjiahoM4IIiwiigt观口年1月5日1“三1322索迪地1工审叱|城叼子口门户陶!kiZ-apQtdStri4elewnEJstyle(-( (ri4t|料Ii曰肥.一口.eCbgnM-MSfP:|xriM.hHHIPPI，paddEn.:4pxjt-E-Jitlirft另外值得注意的一点是，在 GoogleChrome

9、 浏览器开发人员工具里，所有脚本和样式表是按语法着色的，调试起来更加清晰。js调试面板在脚本面板里，您可以方便的调试的几个主要功能：JavaScript 代码。下面的图中标注了在脚本面板里使两白珞曲英如在下位片朝中可燃指矍房区加用本案怦然开此墓可以海M寿蜜班票的童立鼻力好耳可口立法， 孑牡R置点击此国标祖国鼻舞异事时鱼芟牛藤图中的一的 3 个图标分别代表：单步调试，不进入函数体内部单步调试，进入函数体内部跳出当前函数设置断点后按 F5 刷新，页面会在执行到断点语句处停下，如图:您可以在右侧添加所需观察的变量，来进行跟踪变量值的变化，也可查看堆栈调用情况及全局变量和函数的信息，也可以将鼠标移到感

10、兴趣的变量名上直接查看此变量当前的值。在脚本面板中，您可能会用到以下快捷键帮助调试：Windows/LinuxMac功能Ctrl+/F8 或 Command+/继续运行Ctrl+?F10 或 Command+?单步调试，不进入函数体内部Ctrl+;F11 或 Command+;单步调试，进入函数体内部Shift+Ctrl+;Shift+F11 或 Shift+Command+;跳出当前函数Ctrl+.Ctrl+.进入上一层调用栈Ctrl+,Ctrl+,进入下一层调用栈js控制台(consol备注：控制台输入命令需要敲入回车键JavaScript 控制台可与其它面板联合使用，您可以借助它来审查

11、DOM 元素、调试JavaScript 代码、查看 HTML 解析错误等。我们再次以 Google 简体中文首页为例说明 JavaScript 控制台的用法：打开方式竽心一宝或者进入 GoogleChrome 浏览器开发人员工具的元素面板，点击工具窗口左下角的第二个图标打开 JavaScript控制台，您可以通过$(,element_id?)来查看一个 DOM 元素,也可以通过$N”,印一查看最近选中的元素。$0 为最近选中的元素，$1 为前一个选中的元素，以此类推:您也可以通过 inspect()语句获得当前窗口或页面中的对象，例如：使用inspect(window.navigator.userAgent)可获得当前浏览器信息，而 inspect(profileEnd)则会显示 profileEnd 这个函数：因为控制台会帮您自动补齐命令、对象名以及属性名称等等，所以完全不必担心需要键入太多字符或者敲错。使用 dir()语句可获得一个元素或对象的详细属性，