CSS 除錯
有時在編寫 CSS 時，您會遇到 CSS 似乎無法按預期工作的問題。也許您認為某個選擇器應該匹配某個元素，但沒有任何反應，或者某個框的大小與您期望的不同。本文將為您提供有關如何除錯 CSS 問題的指導，並向您展示所有現代瀏覽器中包含的開發者工具如何幫助您找出發生了什麼。
如何訪問瀏覽器開發者工具
文章 什麼是瀏覽器開發者工具 是一份最新的指南，解釋瞭如何在各種瀏覽器和平臺上訪問這些工具。雖然您可能選擇主要在一個特定的瀏覽器中開發，因此會最熟悉該瀏覽器中包含的工具，但瞭解如何在其他瀏覽器中訪問它們也很有價值。這將有助於您在多個瀏覽器之間看到不同的渲染效果。
您還會發現，瀏覽器在建立其開發者工具時選擇了關注不同的領域。例如，在 Firefox 中，有一些出色的工具可用於以視覺化方式處理 CSS 佈局，使您可以檢查和編輯 網格佈局、Flexbox 和 形狀。但是，所有不同的瀏覽器都具有類似的基本工具，例如，用於檢查應用於頁面上元素的屬性和值，以及從編輯器中對其進行更改。
在本課中，我們將瞭解 Firefox 開發者工具的一些用於處理 CSS 的有用功能。為此，我將使用 示例檔案。如果您想一起學習，請在新標籤頁中載入此檔案，並按照上面連結的文章中所述開啟開發者工具。
DOM 與檢視原始碼
開發者工具新手可能會遇到一個問題，那就是在您 檢視網頁原始碼 或檢視您放在伺服器上的 HTML 檔案時看到的內容，以及在開發者工具的 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 比較，確定應用規則前後某個元素的外觀是否更好，還可以幫助除錯——例如，如果佈局出現問題，並且你試圖找出導致問題的原因。
以下影片提供了一些關於使用 Firefox DevTools 除錯 CSS 的有用技巧。
編輯值
除了開啟和關閉屬性外，你還可以編輯其值。也許你想看看其他顏色是否看起來更好，或者希望調整某些內容的大小？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 屬性也被劃掉了。你現在可以看到類選擇器覆蓋了元素選擇器。
詳細瞭解 Firefox 開發者工具
MDN 上有很多關於 Firefox DevTools 的資訊。檢視主要的DevTools 部分，有關我們在本課中簡要介紹的內容的更多詳細資訊，請參閱操作指南。
除錯 CSS 中的問題
DevTools 在解決 CSS 問題時可以提供很大的幫助，因此，當你遇到 CSS 行為不符合預期的情況時，你應該如何解決它？以下步驟應該會有所幫助。
從問題中退一步
任何編碼問題都可能令人沮喪，尤其是 CSS 問題，因為你通常不會收到錯誤訊息來線上搜尋以幫助查詢解決方案。如果你感到沮喪，請暫時離開問題一段時間——出去散步、喝點飲料、與同事聊天，或者暫時做一些其他事情。有時，當你停止思考問題時，解決方案會神奇地出現，即使沒有，在感覺清爽時處理問題也會容易得多。
你的 HTML 和 CSS 有效嗎？
你正在測試的瀏覽器是否支援該屬性和值？
瀏覽器會忽略它們不理解的 CSS。如果使用的屬性或值不受你正在測試的瀏覽器支援，則不會出現任何錯誤，但該 CSS 不會應用。DevTools 通常會以某種方式突出顯示不受支援的屬性和值。在下圖中，瀏覽器不支援 grid-template-columns 的子網格值。
你還可以檢視 MDN 上每個屬性頁面底部的瀏覽器相容性表。它們向你顯示了該屬性的瀏覽器支援情況，如果某些用法受支援而其他用法不受支援，則通常會進行細分。請參閱 shape-outside 屬性的相容性表。
是否有其他內容覆蓋了你的 CSS？
這就是你所學到的關於特異性的知識發揮作用的地方。如果你有更具體的內容覆蓋了你的嘗試，那麼你可能會陷入非常令人沮喪的嘗試中，試圖找出是什麼。但是，如上所述，DevTools 會向你顯示正在應用的 CSS，你可以找出如何使新的選擇器足夠具體以覆蓋它。
建立問題的簡化測試用例
如果上述步驟未解決該問題，則需要進行更多調查。此時，最好的做法是建立一個稱為簡化測試用例的內容。能夠“簡化問題”是一項非常有用的技能。它將幫助你發現自己程式碼和同事程式碼中的問題，並使你能夠更有效地報告錯誤並尋求幫助。
簡化測試用例是一個程式碼示例，以儘可能簡單的方式演示了問題，並刪除了無關的周圍內容和樣式。這通常意味著將有問題的程式碼從你的佈局中提取出來，建立一個僅顯示該程式碼或功能的小示例。
建立簡化測試用例
- 如果你的標記是動態生成的——例如透過 CMS——請建立靜態版本的輸出以顯示問題。像CodePen這樣的程式碼共享網站可用於託管簡化測試用例，因為這樣它們就可以線上訪問，並且你可以輕鬆地與同事共享。你可以先在頁面上執行“檢視原始碼”，並將 HTML 複製到 CodePen 中，然後獲取任何相關的 CSS 和 JavaScript 並將其也包含在內。之後，你可以檢查問題是否仍然存在。
- 如果刪除 JavaScript 不會使問題消失，則不要包含 JavaScript。如果刪除 JavaScript *確實*使問題消失，則儘可能刪除 JavaScript，保留導致問題的部分。
- 刪除任何不影響問題的 HTML。刪除元件甚至佈局的主要元素。同樣，嘗試減少到仍然顯示問題的最小程式碼量。
- 刪除任何不影響問題的 CSS。
在此過程中，你可能會發現導致問題的原因，或者至少能夠透過刪除某些特定內容來開啟和關閉它。在發現問題時，在程式碼中新增一些註釋是值得的。如果你需要尋求幫助，它們將向幫助你的人展示你已經嘗試過什麼。這很可能為你提供足夠的資訊來搜尋可能存在的問題和解決方法。
如果你仍然難以解決問題，那麼擁有一個簡化測試用例可以讓你向他人尋求幫助，例如釋出到論壇或向同事展示。如果你可以在尋求幫助之前，展示你已經完成了縮小問題範圍並準確確定其發生位置的工作，那麼你更有可能獲得幫助。更有經驗的開發人員可能會很快發現問題併為你指明正確的方向，即使沒有，你的簡化測試用例也能讓他們快速檢視，並希望至少能夠提供一些幫助。
如果你的問題實際上是瀏覽器中的錯誤，則簡化測試用例也可用於向相關瀏覽器供應商（例如，在 Mozilla 的bugzilla 網站上）提交錯誤報告。
隨著你對 CSS 的經驗越來越豐富，你會發現自己解決問題的速度會越來越快。但是，即使是最有經驗的人有時也會發現自己想知道到底發生了什麼。採取有條理的方法、建立簡化測試用例並向其他人解釋問題通常會導致找到解決方案。