谷歌浏览器 chrome 开发者工具调试(审查元素)技巧

在Google Chrome浏览器出来之前，我一直使用FireFox，因为FireFox的插件非常丰富，更因为FireFox有强大的Firebug，对于前端开发可谓神器。

在Chrome出来的时候，就一直使用Google Chrom作为我的主浏览器，渐渐熟悉Chrome的开发者工具，而Chrome也一直在快速迭代，快速进步中，到现在，Chrome已经绝对成为我的主浏览器，而本文，就是要详细说说Chrome的开发者工具的使用技巧。以下讲解与截图以 Google Chrome V46版本 为示例。

1、开始调试，怎样打开Chrome的开发者工具？

你可以直接在页面上点击右键，然后选择[审查元素]，或者直接按F12键。

2、打开的开发者工具的样子：

不过我一般习惯点右上角的3个圆点按钮，仍然选择独立窗口图标，将开发者工具弹出作为一个独立的窗口，如下图：

转换为独立窗口图标：

3、下面来分别说下每个Tab的作用。

Elements（元素）标签页

这个就是查看、编辑页面上的元素，包括HTML和CSS：

菜单从上之下依次是（以下所述快捷键都是在选中元素时生效）：

(1) Add attribute：添加属性，比如添加title属性；(节点没有属性时，快捷键为Enter)
(2) Edit attribute：编辑属性（在节点的属性上右键才出现这项）；（节点有属性时，快捷键为Enter）
(3) Force element state：使元素处于某种伪类状态，可选四种：     :active -> 选定状态     :hover -> 鼠标移到元素上的状态     :visited -> 已经访问过的状态     :focus -> 获取焦点状态     这些状态通常用来调试不同状态下的css样式
(4) Edit as HTML：编辑节点，用于编辑的文本框在失去焦点后结束编辑；（快捷键为F2）
(5) Copy as HTML：复制HTML；
(6) Copy css path：复制css路径，类似当前节点的选择器；
(7) Copy XPath：复制XPath；
(8) Delete node：删除节点；（快捷键为del）
(9) Inspect DOM properties：在console（会自动打开drawer中的console面板）中显示当前节点对象
(10) Break on：       Subtree modifications -> 子树修改时打断；       Attributes modifications -> 节点属性修改时打断；       Node removal -> 节点移除时打断；
(11) Scroll into view：当前节点不在视口中时，页面滚动至节点出现在视口；
(12) Word wrap：节点过长时是否换行，勾上-> 换行；不勾 -> 不换行，出现滚动条；


Styles 子标签页（修改样式能即时看到效果）


Styles面板里显示的是：在选中节点上应用的样式，通过横线分割每一条rule，rule的权重越靠上越高。


Computed （盒子）子标签页

通过Styles，我们还可以看到选中节点的盒子模型及节点上应用的所有样式。Show inherited：是否显示继承属性；盒子模型里边由内而外对应的是元素的：content，padding，border，margin。


在盒子模型下面的样式里，我们能够看到每条样式是来自于哪条rule的：

4、其它标签页介绍：

NetWork（网络）标签页

NetWork可以看到网页加载的脚本和资源的时间，还可以看到某些不能加载成功的资源；这里有位是百度首页演示，百度首页内容很干净所以不需要加载什么图片等资源

Sources（源头）标签页

Sources可以查看运行的脚本，调试一般都是在Sources调试的，所以程序开发者需要了解和熟悉Sources的使用

Resources(资源)标签页

Resources里可以查看web程序跑起来后所加载的一些资源（Resources），包括图片或者其他“值”，以及Cookies

Console（控制台）标签页

Console可以查看网页运行后提示的消息，错误或者警告以及输出内容等，网页后台可以使用Console.debug("输出内容")；来在Console输出显示，可以做到调试的作用吧，不过一般真正调试不是拿Console。console.debug("Console使用介绍");console是小写形式，不然提示没有Console

Audits标签页( CSS 检查)

Google chrome在“开发者工具”中提供了类似 dust-me 的冗余css检测功能。现在你可以对你的 CSS 进行审核，比如检查没有在 web 页面使用的无用的样式规则。在“Audits”（审核）选项， 选择 Web Page Performance 选框，点击“Run”（运行）按钮，你将会看到一个目前在该页面没有使用到的类/选择器的列表，如下图所示：

这个检测结果分为2类，一个是网络，一个是网页性能；

这里显示了当前页面加载但没有用到的css样式文件和样式名称列表，点击css文件名前的 箭头可以展开得到一个列表。如果冗余内容很少，就可以直接分析一下然后到文件内删掉了。 需要注意的是，这个功能只是分析当前页面，所以很多其他页面需要但当前页没有使用的样式 也会列出。所以需要谨慎操作，完全确定了是冗余的样式，再手工清除。

另还有 Timeline（时间线）标签页、Profiles（分析）标签页，由于不常使用，就不再一一介绍了。