20.1　尝试一些调试技巧

下面是用于排查网页错误的一些真实技巧。

  • 首先检查常见的错误。

  • 细心观察，有条不紊。

  • 逐步开展工作。做出小的改动，并在每次改动后进行测试。这样才能在问题出现之后定位到问题的来源。

  • 调试时，从你能确保正确的地方开始。之后再逐一添加可能出问题的部分，每次添加完以后都在浏览器中进行测试，直到找到问题的来源为止。

  • 用排除法寻找产生问题的代码片段。例如，可以注释掉一半代码，检查问题是否出于另一半代码，如图20.1.1所示。再在有问题的代码中注释掉更小的部分，直到找出问题。（参见3.17节和7.2节。）

  1. ...
  2.  
  3. .entry {
  4.      border-right: 2px dashed #b74e07;
  5.      margin: 0 .5em 2em 0;
  6. }
  7.  
  8. .entry h2 {
  9.      font-size: 1.25em;
  10.      line-height: 1;
  11. }
  12.  
  13. /*
  14. .continued,
  15. .entry .date {
  16.     text-align: right;
  17. }
  18.  
  19. .entry .date {
  20.     line-height: 1;
  21.     margin: 0 1em 0 0;
  22.     padding: 0;
  23.     position: relative;
  24.     top: -1em;
  25. }
  26.  
  27. .intro {
  28.     margin: -5px 0 0 110px;
  29. }
  30. */
  31.  
  32. .photo {
  33.      float: left;
  34.      height: 75px;
  35.      width: 100px;
  36. }
  37. .photo a {
  38.      margin: 0;
  39.      padding: 0;
  40. }
  41.  
  42. ...

图20.1.1　我注释掉了这段代码中间的一部分，以查看它是不是出错的原因。注意，很多HTML和CSS编辑器都包含代码高亮，即自动为元素、选择器等设置不同的颜色。这对调试是有帮助的。例如，如果将CSS属性名称打错了，编辑器就不会以预期的颜色显示它，表明它是无效的

  • 留意输入错误。很多令人费解的错误是由简单的输入错误造成的。例如，在HTML中以某种方式拼写类名，却在CSS中使用了另一个名称。

  • 在CSS中，如果不确定问题是出在属性上还是出在选择器上，可以试着在选择器上添加极其简单的声明，如color: red;、border: 1px solid red;等（如果red已经用于网页的设计，也可以选择一种不常见的颜色，如pink）。如果元素变成红色，那么问题就出在属性上,否则问题就出在选择器上（假定不存在另一个特殊性更强的选择器，也不存在比当前选择器更靠后的选择器）。

  • 休息一下。有时，在散步一小时之后工作15分钟比用这一小时苦坐在电脑前工作的收获还要大。有时，问题是在小憩时想到解决方案的。

  • 使用一个或多个开发工具，直接在浏览器中对HTML或CSS进行修改测试。或者使用这些工具审查代码，试着对问题进行定位。（参见“浏览器开发工具”。）

浏览器开发工具

浏览器都包含调试工具，或者有作为插件的调试工具。很多工具的特性都是相似的。你会发现，一种反复用到的特性就是直接修改CSS或HTML并立即查看它们对页面的影响。这可以让你快速地对修改进行测试，满意之后再将它们包含到代码里去。

下面是各个浏览器中最常用的工具。

网上还有演示如何使用这些工具的文档和视频。

在20.3节和20.4节中分别有Firebug和Web Inspector的实例。