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

Chrome浏览器常用调试功能介绍

2011-1-5

目录
TOC\o"1-3"\h\z\uHYPERLINK\l_Toc322951目的 PAGEREF_Toc322953
HYPERLINK\l_Toc40272.浏览器选择 PAGEREF_Toc40273
HYPERLINK\l_Toc257462.1推荐浏览器 PAGEREF_Toc257463
HYPERLINK\l_Toc97982.2扩展功能 PAGEREF_Toc97983
HYPERLINK\l_Toc188642.2.1常用扩展 PAGEREF_Toc188644
HYPERLINK\l_Toc272172.2.2开发相关扩展 PAGEREF_Toc272174
HYPERLINK\l_Toc231753.工具使用 PAGEREF_Toc231754
HYPERLINK\l_Toc316243.1开启开发者工具 PAGEREF_Toc316244
HYPERLINK\l_Toc194023.2常用面板 PAGEREF_Toc194026
HYPERLINK\l_Toc267943.2.1大致介绍 PAGEREF_Toc267946
HYPERLINK\l_Toc129963.2.2元素面板 PAGEREF_Toc129966
HYPERLINK\l_Toc218103.2.3js调试面板 PAGEREF_Toc2181010
HYPERLINK\l_Toc7403.2.4js控制台（console） PAGEREF_Toc74012
HYPERLINK\l_Toc136434.参考资料 PAGEREF_Toc1364315


1目的
通过本文档简单介绍了前台调试比较有用的开发技巧，由于我也是在学习中，我挑选了一些我认为比较有用的功能列出来。可能以前有用过firebug调试工具，差不多类似。

2.浏览器选择
2.1推荐浏览器
Chrome官方浏览器和基于chrome官方浏览器开发的双核浏览器。基于国内的网站兼容性情况可以选择双核浏览器，比如360极速，枫叶浏览器，sumchrome浏览器等等。双核浏览器提供了两种浏览模式，极速和兼容模式，兼容模式将会以本地ie版本进行浏览。
备注：双核浏览器只能在极速模式下才能打开浏览器开发人员工具。

推荐360极速浏览器（目前双核里面稳定性最好的浏览器），下载地址：HYPERLINK"http://chrome.360.cn/"http://chrome.360.cn/

2.2扩展功能
使用chrome必须要用到扩展功能
2.2.1常用扩展
HYPERLINK"https://chrome.google.com/extensions/list/popular?hl=zh-CN"https://chrome.google.com/extensions/list/popular?hl=zh-CN

2.2.2开发相关扩展
https://chrome.google.com/extensions/featured/web_dev

3.工具使用
3.1开启开发者工具
右键点击网页上的任一元素，在弹出菜单中选择“审查元素”。

在Windows或Linux操作系统上，使用Ctrl+Shift+I快捷键打开开发人员工具（或使用Ctrl+Shift+J直接进入JavaScript控制台）。

点击位于浏览器用户界面右上角下拉菜单，具体菜单如下图

打开开发者工具后，如下图所示

开发者工具
3.2常用面板
备注：chrome9.0后面板增加了一个network

3.2.1大致介绍
这里只介绍常用的面板，元素（Elements）面板、脚本（Scripts）面板其他面板功能

3.2.2元素面板
在元素（Elements）面板中，可以看到整个页面的DOM树结构和每个元素的所有属性，同时也可以实时地修改这些元素及其属性，并可以实时看到修改后的效果。
我们这里以HYPERLINK"http://www.google.com.hk/"Google简体中文首页为例，鼠标右键单击“Google搜索”按钮，选择“审查元素”，您会看到如下的窗口界面（注：此处使用的内嵌工具窗口模式，如您的工具窗口为独立窗口模式，可通过点击窗口左下方的“停靠”图标将其变为内嵌模式）：

在工具窗口右侧，显示的是被选元素的样