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 （中文翻譯）

《調試九法——軟硬件的調試之道》