测试代码

边写代码边调试是不可避免的。什么是调试？调试就是找出你的代码没有得到预期结果的原因。我喜欢一句话，“调试是对假定的系统性侵害”。换句话说，调试过程就是去发现你认为代码该做什么与代码实际上做了什么之间差别的过程。

为此，确切知道某个HTML元素被应用了哪些CSS规则至关重要。由于CSS规则会层叠，很多CSS规则都可能设定同一个CSS属性，但最终这个属性只能取得一个值。比如，对body元素设定的字体样式将被页面上的所有文本元素继承。如果有规则为某个文本元素设定了另一种字体样式，则该样式就会覆盖从body继承的样式。一般来说，找到哪个样式胜出并非易事，因此本节就教给大家一种方法，让你能亲眼看到某个元素都被应用了哪些样式，而哪些样式又是最终起作用的。下面这个例子是从我的电子书Visual Stylin' with CSS3中找的一个页面。

如图A所示，在浏览器（这里是Safari）中右键单击一个元素，然后从上下文菜单中选择Inspect Element，就会打开Web Inspector。Web Inspector同时会显示HTML元素（左下面板）和该元素接受的CSS规则（右下面板），如图B所示。

图A（右上） 右击元素并选择Inspect Element（审查元素），打开Web Inspector（或在安装了Firebug的Firefox中打开“查看器”）

图B（下） 选中元素的Web Inspector界面

这里的CSS清单显示，虽然为p元素设定了Open Sans字体，但这个字体样式被上面那条更有针对性的.basic_borders_large.demo8 p规则覆盖了，看到那条删除线没？因此，其中的文字会用Niconne字体显示。在HTML面板中指定一个元素，与之相关的样式就会出现在CSS面板。

这对我们知道某个元素到底都接受了哪些样式确实太有用了。假如你修改了一个样式，但元素并没有受影响，那你就该打开Web Inspector看一看，到底是你修改的规则还是其他规则在实际影响该元素。看完了，单击左上角的关闭（x）按钮，就可以退出Web Inspector。

我个人还是推荐Firebug，它是Firefox的一个扩展。通过Firebug不仅能查看DOM结构，还能调试JavaScript。要安装Firebug，可以在Firefox的“Firefox”菜单中选择“Web开发者”> “获取更多工具”，然后在“附加组件”页面中搜索“Firebug”。找到后按照简单的说明安装即可。