除錯 CSS
有時在編寫 CSS 時，你會遇到一個問題，你的 CSS 似乎沒有按預期工作。也許你認為某個選擇器應該匹配一個元素，但什麼也沒有發生，或者一個盒子的大小與你預期的不同。本文將指導你如何除錯 CSS 問題，並向你展示所有現代瀏覽器中包含的 DevTools 如何幫助你找出問題所在。
| 預備知識 | 基本 HTML 語法，CSS 樣式基礎（本模組之前的課程中已涵蓋！） |
|---|---|
| 學習成果 |
如何訪問瀏覽器開發者工具
文章 什麼是瀏覽器開發者工具 解釋瞭如何在各種瀏覽器和平臺上訪問這些工具。雖然你可能主要選擇在特定瀏覽器中進行開發，因此會最熟悉該瀏覽器中包含的工具，但瞭解如何在其他瀏覽器中訪問它們是值得的。如果你在多個瀏覽器之間看到不同的渲染效果，這將有所幫助。
在本課程中，我們將介紹 Firefox DevTools 中用於處理 CSS 的一些有用功能。為此，我將使用 一個示例檔案。如果你想跟著操作，請在新標籤頁中載入此檔案，並按照上面連結的文章所述開啟你的 DevTools。
DOM 與檢視原始碼
對於 DevTools 新手來說，檢視網頁的原始碼或檢視你放在伺服器上的 HTML 檔案與你在 DevTools 的HTML 面板中看到的內容之間存在差異，這可能會讓他們感到困惑。雖然它與你透過“檢視原始碼”看到的內容大致相似，但仍有一些差異。
在渲染的 DOM 中，瀏覽器可能已經規範化了 HTML，例如為你糾正了一些編寫不良的 HTML。如果你錯誤地關閉了一個元素，例如透過開啟一個 <h2> 但使用 </h3> 關閉，瀏覽器將弄清楚你的意圖，並且 DOM 中的 HTML 將使用 </h2> 正確關閉開啟的 <h2>。DOM 還會顯示由 JavaScript 所做的任何更改。
相比之下，檢視原始碼是儲存在伺服器上的 HTML 原始碼。你的 DevTools 中的HTML 樹精確顯示瀏覽器在任何給定時間正在渲染的內容，因此它讓你深入瞭解實際發生的情況。
檢查應用的 CSS
選擇頁面上的一個元素，可以透過右鍵/Ctrl+單擊它並選擇“檢查”，或從 DevTools 顯示左側的 HTML 樹中選擇它。嘗試選擇類名為 box1 的元素；這是頁面上第一個周圍有邊框的元素。
如果你檢視 HTML 右側的規則檢視，你應該能夠看到應用於該元素的 CSS 屬性和值。你將看到直接應用於類 box1 的規則，以及從其祖先（在本例中為 <body>）繼承的 CSS。如果你看到一些你意想不到的 CSS 被應用，這會很有用。也許它正在從父元素繼承，你需要新增一個規則來在此元素的上下文中覆蓋它。
同樣有用的是能夠展開速記屬性。在我們的示例中使用了 margin 速記。
單擊小箭頭以展開檢視，顯示不同的長手屬性及其值。
當規則視圖面板處於活動狀態時，你可以在其中切換值的開/關——如果你將滑鼠懸停在上面，會出現複選框。取消選中某個規則的複選框，例如 border-radius，CSS 將停止應用。
你可以使用此功能進行 A/B 比較，決定應用規則後是否看起來更好，也可以幫助除錯——例如，如果佈局出錯，你正在嘗試找出哪個屬性導致了問題。
編輯值
除了開啟和關閉屬性之外，你還可以編輯它們的值。也許你想看看另一種顏色是否更好，或者想微調某個東西的大小？DevTools 可以為你節省大量編輯樣式表和重新載入頁面的時間。
選中 box1 後，單擊顯示邊框顏色的色塊（小彩色圓圈）。一個顏色選擇器將開啟，你可以嘗試一些不同的顏色；這些顏色將即時更新在頁面上。以類似的方式，你可以更改邊框的寬度或樣式。
新增新屬性
你可以使用 DevTools 新增屬性。也許你已經意識到你不希望你的盒子繼承 <body> 元素的字型大小，並希望設定自己的特定大小？你可以在將其新增到 CSS 檔案之前在 DevTools 中嘗試此操作。
你可以點選規則中的閉合花括號開始在其中輸入新的宣告，此時你可以開始輸入新屬性，DevTools 將向你顯示匹配屬性的自動完成列表。選擇 font-size 後，輸入你想要嘗試的值。你還可以點選 + 按鈕新增一個具有相同選擇器的附加規則，並在那裡新增你的新規則。
注意：規則檢視中還有其他有用的功能，例如帶有無效值的宣告會被劃掉。你可以在檢查和編輯 CSS 中瞭解更多資訊。
理解盒模型
在之前的課程中，我們討論了盒模型，以及我們有一個替代盒模型，它根據你給它們的尺寸以及內邊距和邊框來改變元素的尺寸計算方式。DevTools 可以真正幫助你理解元素的尺寸是如何計算的。
佈局檢視顯示了所選元素的盒模型圖，以及改變元素佈局方式的屬性和值的描述。這包括你可能沒有在元素上明確使用的屬性的描述，但這些屬性確實具有初始值。
在此面板中，其中一個詳細屬性是 box-sizing 屬性，它控制元素使用哪個盒模型。
比較類名為 box1 和 box2 的兩個盒子。它們都應用了相同的寬度（400px），但 box1 在視覺上更寬。你可以在佈局面板中看到它使用的是 content-box。此值會獲取你賦予元素的尺寸，然後加上內邊距和邊框寬度。
類名為 box2 的元素正在使用 border-box，因此這裡的內邊距和邊框從你賦予元素的尺寸中減去。這意味著盒子在頁面上佔據的空間是您指定的精確尺寸——在我們的例子中是 width: 400px。
注意：在檢查和檢視盒模型中瞭解更多資訊。
解決特異性問題
有時在開發過程中，尤其是在需要編輯現有網站上的 CSS 時，你會發現很難讓某些 CSS 生效。無論你做什麼，元素似乎都不接受 CSS。這裡通常發生的情況是，更具體的選擇器正在覆蓋你的更改，而 DevTools 在這裡會真正幫助你。
在我們的示例檔案中，有兩個單詞被包裹在 <em> 元素中。一個顯示為橙色，另一個顯示為亮粉色。在 CSS 中我們應用了
em {
color: hotpink;
font-weight: bold;
}
然而，在樣式表中，其上方有一個帶有 .special 選擇器的規則
.special {
color: orange;
}
正如你從關於處理衝突的課程中回憶起的那樣，我們討論了特異性，類選擇器比元素選擇器更具特異性，因此這是應用的值。DevTools 可以幫助你發現此類問題，特別是當資訊埋藏在一個巨大的樣式表中的某個地方時。
檢查帶有 .special 類的 <em>，DevTools 將顯示橙色是應用的顏色，並且應用於 <em> 的 color 屬性被劃掉了。你現在可以看到類選擇器正在覆蓋元素選擇器。
除錯 CSS 中的問題
DevTools 在解決 CSS 問題時會非常有幫助，所以當你發現 CSS 行為不如預期時，應該如何解決呢？以下步驟應該會有所幫助。
退一步思考問題
任何編碼問題都可能令人沮喪，尤其是 CSS 問題，因為你通常不會收到線上搜尋錯誤訊息來幫助尋找解決方案。如果你感到沮喪，請暫時遠離問題——去散步，喝杯飲料，和同事聊天，或者暫時做些其他事情。有時當你停止思考問題時，解決方案就會奇蹟般地出現，即使沒有，在精神煥發時處理問題也會容易得多。
你的 HTML 和 CSS 有效嗎？
瀏覽器期望你的 CSS 和 HTML 編寫正確，但瀏覽器也非常寬容，即使你的標記或樣式表中有錯誤，它們也會盡力顯示你的網頁。如果你的程式碼中有錯誤，瀏覽器需要猜測你的意圖，它可能會做出與你心目中不同的決定。此外，兩個不同的瀏覽器可能會以兩種不同的方式處理問題。因此，第一步是使用驗證器執行你的 HTML 和 CSS，以發現並修復任何錯誤。
你正在測試的瀏覽器是否支援該屬性和值？
瀏覽器會忽略它們不理解的 CSS。如果你正在使用的屬性或值在你正在測試的瀏覽器中不受支援，那麼什麼都不會損壞，但該 CSS 將不會被應用。DevTools 通常會以某種方式突出顯示不受支援的屬性和值。在下面的截圖中，瀏覽器不支援 grid-template-columns 的 subgrid 值。
你還可以檢視 MDN 上每個屬性頁面底部的瀏覽器相容性表格。這些表格顯示了該屬性的瀏覽器支援情況，通常會細分是否支援該屬性的某些用法而不支援其他用法。檢視 grid-template-columns 屬性的相容性表格。
是否有其他東西覆蓋了你的 CSS？
這正是你所學到的關於特異性的知識大有用武之地。如果有一個更具體的選擇器覆蓋了你想要做的事情，你可能會陷入一場非常令人沮喪的嘗試找出原因的遊戲。然而，如上所述，DevTools 將向你展示正在應用的 CSS，你可以找出如何使新選擇器足夠具體以覆蓋它。
建立一個問題的精簡測試用例
如果上述步驟未能解決問題，那麼你需要進行更多的調查。此時最好的做法是建立一個所謂的精簡測試用例。“精簡問題”是一項非常有用的技能。它將幫助你發現自己和同事程式碼中的問題，並能讓你更有效地報告錯誤和尋求幫助。
精簡測試用例是一個程式碼示例，它以最簡單的方式展示問題，並刪除了不相關的周圍內容和樣式。這通常意味著將有問題的程式碼從你的佈局中取出，以建立一個只顯示該程式碼或功能的小示例。
建立精簡測試用例
- 如果你的標記是動態生成的——例如透過 CMS——請建立一個顯示問題的靜態輸出版本。像 CodePen 這樣的程式碼共享網站對於託管精簡測試用例很有用，因為它們可以線上訪問，你可以輕鬆地與同事共享。你可以首先在頁面上檢視原始碼並將 HTML 複製到 CodePen，然後獲取任何相關的 CSS 和 JavaScript 並也包含在內。之後，你可以檢查問題是否仍然存在。
- 如果刪除 JavaScript 並不能解決問題，則不要包含 JavaScript。如果刪除 JavaScript 確實解決了問題，那麼儘可能多地刪除 JavaScript，只保留導致問題的部分。
- 移除任何與問題無關的 HTML。移除佈局的元件甚至主要元素。同樣，嘗試將程式碼量精簡到仍能顯示問題的最小程度。
- 刪除任何不影響問題的 CSS。
在此過程中，你可能會發現問題的原因，或者至少能夠透過刪除特定的東西來開啟和關閉它。在你發現問題時，值得在程式碼中新增一些註釋。如果你需要尋求幫助，它們會向幫助你的人展示你已經嘗試過什麼。這很可能會給你足夠的資訊來搜尋可能的問題和變通方法。
如果你仍然難以解決問題，那麼擁有一個精簡測試用例可以讓你更容易地尋求幫助，例如透過在論壇上發帖或向同事展示。如果你能證明你已經完成了精簡問題並準確識別問題發生位置的工作，然後再尋求幫助，你更有可能獲得幫助。經驗豐富的開發人員可能能夠快速發現問題併為你指明正確的方向，即使不能，你的精簡測試用例也將使他們能夠快速檢視並有望提供至少一些幫助。
如果你的問題實際上是瀏覽器中的一個錯誤，那麼精簡測試用例也可以用於向相關瀏覽器供應商提交錯誤報告（例如，在 Mozilla 的 bugzilla 網站上）。
隨著你對 CSS 越來越熟悉，你會發現自己解決問題的速度越來越快。然而，即使是我們中最有經驗的人有時也會發現自己想知道到底發生了什麼。採取系統的方法，製作一個精簡的測試用例，並向其他人解釋問題通常會找到解決方案。
總結
所以這就是它：CSS 除錯的介紹，它應該能給你一些有用的技能，以便在你的職業生涯中開始除錯 CSS 和其他型別的程式碼時可以使用。
本模組的所有課程到此結束。最後，我們將透過一系列挑戰來測試你對所涵蓋主題的知識。
另見
- Firefox > 檢查和編輯 CSS，Firefox 源文件
- Chrome > 檢視和更改 CSS，developer.chrome.com