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

《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.3js调试面板103.2.4js控制台（console）124.参考资料151目的通过本文档简单介绍了前台调试比较有用的开发技巧，由于我也是在学习中，我挑选了一些我认为比较有用的功能列出来。可能以前有用过firebug调试工具，差不多类似。2.浏览器选择2.

2、1推荐浏览器Chrome官方浏览器和基于chrome官方浏览器开发的双核浏览器。基于国内的网站兼容性情况可以选择双核浏览器，比如360极速，枫叶浏览器，sumchrome浏览器等等。双核浏览器提供了两种浏览模式，极速和兼容模式，兼容模式将会以本地ie版本进行浏览。备注：双核浏览器只能在极速模式下才能打开浏览器开发人员工具。推荐360极速浏览器（目前双核里面稳定性最好的浏览器），下载地址：http://chrome.360.cn/2.2扩展功能使用chrome必须要用到扩展功能2.2.1常用扩展https://

3、chrome.google.com/extensions/list/popular?hl=zh-CN2.2.2开发相关扩展https://chrome.google.com/extensions/featured/web_dev3.工具使用3.1开启开发者工具·右键点击网页上的任一元素，在弹出菜单中选择“审查元素”。·在Windows或Linux操作系统上，使用Ctrl+Shift+I快捷键打开开发人员工具（或使用Ctrl+Shift+J直接进入JavaScript控制台）。·点击位于浏览器用户界面右上角下拉

4、菜单  ，具体菜单如下图打开开发者工具后，如下图所示开发者工具3.2常用面板备注：chrome9.0后面板增加了一个network3.2.1大致介绍这里只介绍常用的面板，元素（Elements）面板、脚本（Scripts）面板其他面板功能3.2.2元素面板在元素（Elements）面板中，可以看到整个页面的DOM树结构和每个元素的所有属性，同时也可以实时地修改这些元素及其属性，并可以实时看到修改后的效果。我们这里以 Google简体中文首页为例，鼠标右键单击“Google搜索”按钮，选择“审查元素”，您会看到

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

6、的是，添加任何属性都必须以分号结束。 拖动工具窗口最右侧的滚动条，在展开的Styles模块下方还有Metrics、Properties、EventListeners几大模块。Metrics模块以图形方式展示出左侧面板中选中元素的盒模型并标出了各部分的详细数值，在调试页面布局问题时，这样的展示方式往往更直观、更清晰。 向上拖动工具窗口中部的滚动条，找到“图片”元素，点击后，可看到在页面上相应的元素被选中，这时我们将工具窗口右侧的滚动条拖到最下方，展开EventListeners中个各项，可看到这个链接（元素）的

7、相关事件监听函数。通过EventListeners项右侧的“齿轮”图标，您可以选择是只显示选中节点上的注册的事件，还是显示整个事件流中所有注册的事件。 点击工具窗口左下角的放大镜图标  可进入“审查模式”，选中后，放大镜变为蓝色，这时随鼠标在主窗口的页面中的移动，你会看到相应的元素被高亮标识出来，点击后，工具窗口会显示选中元素的DOM节点信息。另外值得注意的一点是，在GoogleChrome浏览器开发人员工具里，所有脚本和样式表是按语法着色的，调试起来更加清晰。3.2.3js调试面板在脚本面板里，您可以方便的

8、调试JavaScript代码。下面的图中标注了在脚本面板里的几个主要功能： 图中的①—③的3个图标分别代表：①单步调试，不进入函数体内部②单步调试，进入函数体内部③跳出当前函数设置断点后按F5刷新，页面会在执行到断点语句处停下，如图： 您可以在右侧添加所需观察的变量，来进行跟踪变量值的变化，也可查看堆栈调用情况及全局变量和函数的信息，也可以将鼠标移到感兴趣的变量名上直接查看此变量当前的值。在脚本面板