CSS调试

CSS调试就是为什么我写的CSS规则没有生效的事情。

对于后端程序员来说，没有什么比调试更重要的事！我之前做openjdk7移植那会，主要就是使用gdb去调试各种各种的bug。当我看到我所写的CSS没有达到预期的效果，这个时候就要进行调试了！

嗯，我不得不说的是，前端的CSS调试和后端的调试是不同的。后端web调试，主要依靠手指，因为需要一步一步点击鼠标嘛！当然，也不完全，如果调试复杂的后端程序时，还是首先需要使用脑子的，此时的逻辑分析是第一位的；前端的CSS调试不一样，需要脑子！

调试原则

此处列出的原则，取之于《调试九法——软硬件的调试之道》。此本书适合所有需要逻辑思考的软硬件调试的地方。

• 理解系统

系统的基本运行机理是什么。CSS层叠规则、浮动、定位、字体、文本属性等需要有一个基本了解，否则出了问题，都不知道是CSS那一方面的。

• 精简代码，制造失败

制造失败，这个原则在后端调试中，就是要让问题复现！有些问题是偶然发生的，这类问题在后端调试中比较难的问题，解决此类问题的首要任务，就是让这个问题重复出现，起码出现的几率要变大，这样可以降低调试的难度。

在前端调试中，也一样，我们需要简化，然后让其失败！只留足够的html和css代码，然后让问题出现。

调试工具

调试工具一般是PC端的chrome浏览器的chrome-dev，以及firebox的firebug工具。有时我们也需要看代码在手机端到底发生了什么，尤其是现在微信圈这么火爆，免不了需要在真机上运行代码，分析原因。首先介绍一些PC端使用这些工具的场景。

1. 如果考虑某一CSS属性是否有效果，或者在原有的基础上，添加一条、两条CSS规则，使用chrome-dev最方便，因为只要鼠标点击一下，而且还有CSS规则的提示功能，好用。如下图所示：
   

   css-debug-webdev-addclass.png

2. 如果需要实时让CSS规则是否生效，在chrome和firefox中都很方便，下图给出在chrome的截图：

   
   
   css-debug-webdev-editclass.png

3. 如果需要大规模的书写CSS规则，并且实时看到效果，我推荐Web Development和Toggle Web Development Toolbar，真心好用。在CSS菜单下面有编辑CSS菜单，在里面编写的CSS规则，你可以实时看到效果。
   

   css-debug-webdev.png

4. 有时，需要分离问题，去除其它影响因素，此时需要复制一段html代码进行单独分析，这个功能在firefox和chrome中都有，下图是chrome的使用截图。
   

   css-debug-webdev-copyhtml.png

5. 调试的时候，可能会通过设置DOM元素的border、background-color、outline，此处推荐使用outline，因为使用border可能会影响布局。下面是一个简单的事例代码：

    .css-debug{outline:1px dashed red;}
   

6. 使用javascript代码，为页面的所有DOM元素添加不同颜色的框来进行调试。此种方法比较暴力，最终显示效果比较混乱，这种功能在web development中存在，就是给某类型的元素添加特殊的标识。但这种功能也可能有其使用场景，比如没有web development，或者可以限制选择元素，让其给一部分DOM元素添加标识，而且此种功能的代码长度很短，来看一下：github CSS Layout Debugger

    //可以直接在chrome-dev的console里执行
    [].forEach.call(document.querySelectorAll("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})
   

微信端的手机调试，有两种方案：

css-debug-webdev-wechat-debug1.png

另一种方案，使用微信团队开源的针对手机端的github vConsole。

常见CSS案例

案例篇就是常见的CSS陷阱，这种问题的最大可能是什么。特别是新手如我等之辈，没有经验，只能按个排除。我会不断收集整理这节内容。

1. 是否是CSS语法问题

   使用CSS Lint 或者W3C CSS validator检查一下吧！

2. 是否是CSS属性过新，浏览器不支持

   先到Can I Use?去检测一下浏览器是否支持此属性，然后考虑是否需要使用浏览器前缀或者css3的腻子脚本（Modernizr）去解决。

3. 在各个浏览器上的显示样子不同

   使用重置样式。各个浏览器对默认的DOM元素的CSS样式是不一样的，你可以借鉴CSS框架的重置样式，比如Bootstrap的。

4. 图片周边存在有趣的空白

   设置 display: block（图片默认是内联的，因此会有空白）

5. 元素不显示、位置错误或者被遮挡

   是否是定位的问题？如果是定位问题，需要考虑距其最近的，设置position属性的父元素。解决此类问题你需要明白绝对定位、相对定位、固定定位、静态定位的知识。

   display属性是什么？是inline还是block属性？改变此属性看看。对于占位的span元素，可以添加一些内容进去看看是否可以显示。完整的display属性列表看这里（MDN docs display page）

   transform 及 opacity 属性是什么？ z-index值呢？

6. 伪元素不显示

   设置 ‘content’的值？

7. 图片大小问题不能控制

   设置图片的宽度为:width:100%，这样图片的大小便受控于其父空间的大小

8. 元素排列不正确

   有浮动的元素？浮动的宽度有做过设置？大小是多少？padding和margin呢？可否用box-sizing属性去解决？

9. 没有结束...

他山之石

Debugging CSS （中文翻译）

《调试九法——软硬件的调试之道》