CSS調(diào)試

CSS調(diào)試就是為什么我寫的CSS規(guī)則沒有生效的事情缀皱。

對于后端程序員來說荧止，沒有什么比調(diào)試更重要的事塘雳！我之前做openjdk7移植那會(huì)氏捞，主要就是使用gdb去調(diào)試各種各種的bug惩妇。當(dāng)我看到我所寫的CSS沒有達(dá)到預(yù)期的效果株汉，這個(gè)時(shí)候就要進(jìn)行調(diào)試了！

嗯歌殃，我不得不說的是乔妈，前端的CSS調(diào)試和后端的調(diào)試是不同的。后端web調(diào)試氓皱，主要依靠手指路召，因?yàn)樾枰徊揭徊近c(diǎn)擊鼠標(biāo)嘛！當(dāng)然波材，也不完全股淡，如果調(diào)試復(fù)雜的后端程序時(shí)，還是首先需要使用腦子的廷区，此時(shí)的邏輯分析是第一位的唯灵；前端的CSS調(diào)試不一樣，需要腦子隙轻！

調(diào)試原則

此處列出的原則埠帕，取之于《調(diào)試九法——軟硬件的調(diào)試之道》。此本書適合所有需要邏輯思考的軟硬件調(diào)試的地方玖绿。

• 理解系統(tǒng)

系統(tǒng)的基本運(yùn)行機(jī)理是什么敛瓷。CSS層疊規(guī)則、浮動(dòng)镰矿、定位琐驴、字體、文本屬性等需要有一個(gè)基本了解，否則出了問題绝淡，都不知道是CSS那一方面的宙刘。

• 精簡代碼，制造失敗

制造失敗牢酵，這個(gè)原則在后端調(diào)試中悬包，就是要讓問題復(fù)現(xiàn)！有些問題是偶然發(fā)生的馍乙，這類問題在后端調(diào)試中比較難的問題布近，解決此類問題的首要任務(wù)，就是讓這個(gè)問題重復(fù)出現(xiàn)丝格，起碼出現(xiàn)的幾率要變大撑瞧，這樣可以降低調(diào)試的難度。

在前端調(diào)試中显蝌，也一樣预伺，我們需要簡化，然后讓其失斅稹酬诀！只留足夠的html和css代碼，然后讓問題出現(xiàn)骆撇。

調(diào)試工具

調(diào)試工具一般是PC端的chrome瀏覽器的chrome-dev瞒御，以及firebox的firebug工具。有時(shí)我們也需要看代碼在手機(jī)端到底發(fā)生了什么神郊，尤其是現(xiàn)在微信圈這么火爆肴裙，免不了需要在真機(jī)上運(yùn)行代碼，分析原因屿岂。首先介紹一些PC端使用這些工具的場景践宴。

1. 如果考慮某一CSS屬性是否有效果鲸匿，或者在原有的基礎(chǔ)上爷怀，添加一條、兩條CSS規(guī)則带欢，使用chrome-dev最方便运授，因?yàn)橹灰髽?biāo)點(diǎn)擊一下，而且還有CSS規(guī)則的提示功能乔煞，好用吁朦。如下圖所示：
   

   css-debug-webdev-addclass.png

2. 如果需要實(shí)時(shí)讓CSS規(guī)則是否生效，在chrome和firefox中都很方便渡贾，下圖給出在chrome的截圖：

   
   
   css-debug-webdev-editclass.png

3. 如果需要大規(guī)模的書寫CSS規(guī)則逗宜，并且實(shí)時(shí)看到效果，我推薦Web Development和Toggle Web Development Toolbar，真心好用纺讲。在CSS菜單下面有編輯CSS菜單擂仍，在里面編寫的CSS規(guī)則，你可以實(shí)時(shí)看到效果熬甚。
   

   css-debug-webdev.png

4. 有時(shí)逢渔，需要分離問題，去除其它影響因素乡括，此時(shí)需要復(fù)制一段html代碼進(jìn)行單獨(dú)分析肃廓，這個(gè)功能在firefox和chrome中都有，下圖是chrome的使用截圖诲泌。
   

   css-debug-webdev-copyhtml.png

5. 調(diào)試的時(shí)候盲赊，可能會(huì)通過設(shè)置DOM元素的border、background-color敷扫、outline角钩，此處推薦使用outline，因?yàn)槭褂?code>border可能會(huì)影響布局呻澜。下面是一個(gè)簡單的事例代碼：

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

6. 使用javascript代碼递礼，為頁面的所有DOM元素添加不同顏色的框來進(jìn)行調(diào)試。此種方法比較暴力羹幸，最終顯示效果比較混亂脊髓，這種功能在web development中存在，就是給某類型的元素添加特殊的標(biāo)識栅受。但這種功能也可能有其使用場景将硝，比如沒有web development，或者可以限制選擇元素屏镊，讓其給一部分DOM元素添加標(biāo)識依疼，而且此種功能的代碼長度很短，來看一下：github CSS Layout Debugger

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

微信端的手機(jī)調(diào)試而芥，有兩種方案：

css-debug-webdev-wechat-debug1.png

另一種方案，使用微信團(tuán)隊(duì)開源的針對手機(jī)端的github vConsole秘案。

常見CSS案例

案例篇就是常見的CSS陷阱砰苍，這種問題的最大可能是什么潦匈。特別是新手如我等之輩，沒有經(jīng)驗(yàn)赚导，只能按個(gè)排除历等。我會(huì)不斷收集整理這節(jié)內(nèi)容。

1. 是否是CSS語法問題

   使用CSS Lint 或者W3C CSS validator檢查一下吧辟癌！

2. 是否是CSS屬性過新寒屯，瀏覽器不支持

   先到Can I Use?去檢測一下瀏覽器是否支持此屬性，然后考慮是否需要使用瀏覽器前綴或者css3的膩?zhàn)幽_本（Modernizr）去解決黍少。

3. 在各個(gè)瀏覽器上的顯示樣子不同

   使用重置樣式寡夹。各個(gè)瀏覽器對默認(rèn)的DOM元素的CSS樣式是不一樣的，你可以借鑒CSS框架的重置樣式厂置，比如Bootstrap的菩掏。

4. 圖片周邊存在有趣的空白

   設(shè)置 display: block（圖片默認(rèn)是內(nèi)聯(lián)的，因此會(huì)有空白）

5. 元素不顯示昵济、位置錯(cuò)誤或者被遮擋

   是否是定位的問題智绸？如果是定位問題，需要考慮距其最近的访忿，設(shè)置position屬性的父元素瞧栗。解決此類問題你需要明白絕對定位、相對定位海铆、固定定位迹恐、靜態(tài)定位的知識。

   display屬性是什么卧斟？是inline還是block屬性殴边？改變此屬性看看。對于占位的span元素珍语，可以添加一些內(nèi)容進(jìn)去看看是否可以顯示锤岸。完整的display屬性列表看這里（MDN docs display page）

   transform 及 opacity 屬性是什么？ z-index值呢板乙？

6. 偽元素不顯示

   設(shè)置 ‘content’的值是偷？

7. 圖片大小問題不能控制

   設(shè)置圖片的寬度為:width:100%，這樣圖片的大小便受控于其父空間的大小

8. 元素排列不正確

   有浮動(dòng)的元素亡驰？浮動(dòng)的寬度有做過設(shè)置晓猛？大小是多少凡辱？padding和margin呢？可否用box-sizing屬性去解決栗恩？

9. 沒有結(jié)束...

他山之石

Debugging CSS （中文翻譯）

《調(diào)試九法——軟硬件的調(diào)試之道》