CSS调试

2017-09-20 本文已影响0人 code_first

`CSS`调试

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

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

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

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

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

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

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

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

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

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

css-debug-webdev-editclass.png

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

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

css-debug-webdev-copyhtml.png

调试的时候，可能会通过设置DOM元素的border、background-color、outline，此处推荐使用outline，因为使用border可能会影响布局。下面是一个简单的事例代码：
```
 .css-debug{outline:1px dashed red;}
```
使用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)})
```

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

使用真机调试，我测试了小米的手机。首先和调试android应用一样，你要使用usb连接手机，打开usb调试功能；其次使用chrome浏览器的more tools > remote device，进行连接，如下图的截图所示：

css-debug-webdev-wechat-debug1.png

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

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

是否是CSS语法问题

使用CSS Lint 或者W3C CSS validator检查一下吧！
是否是CSS属性过新，浏览器不支持

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

使用重置样式。各个浏览器对默认的DOM元素的CSS样式是不一样的，你可以借鉴CSS框架的重置样式，比如Bootstrap的。
图片周边存在有趣的空白

设置 display: block（图片默认是内联的，因此会有空白）
元素不显示、位置错误或者被遮挡

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

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

transform 及 opacity 属性是什么？ z-index值呢？
伪元素不显示

设置 ‘content’的值？
图片大小问题不能控制

设置图片的宽度为:width:100%，这样图片的大小便受控于其父空间的大小
元素排列不正确

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

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