[譯] CSS 開發必知必會的 16 個調試工具技巧

• 原文地址：16 DevTools tips and tricks every CSS developer needs to know
• 原文做者：Louis Lazaris
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：DEARPORK
• 校對者：TiaossuP, Baddyo

CSS 開發必知必會的 16 個調試工具技巧

大多數開發者基本都使用瀏覽器的開發者工具調試前端，但即便用了好幾年 Chrome 的開發者工具，我仍然會遇到從未見過的技巧和功能。

在本文中，我寫了許多在開發者工具中與 CSS 相關的功能和技巧，我認爲它們將把你的 CSS 開發水平提高至一個新的臺階。其中一些技巧不只僅針對 CSS，可是我仍是把它們放在了一塊兒。

一些是有關於工做流與調試的簡單技巧，另外一些則是最近幾年推出的新功能。它們大多數基於 Chrome 的開發者工具，但也涵蓋了一些 Firefox 的技巧。

審查經過 JavaScript 顯示的元素的 CSS

在開發者工具的 Elements 面板查找大多數元素的 CSS 並不困難。大多數狀況下你只須要右鍵該元素，點擊檢查，而後（若有必要）仔細點在 Elements 面板找到它。一旦元素被選中，它的 CSS 會出如今 Styles 面板，隨時能夠編輯。

有時一個元素會由於一些基於 JavaScript 的用戶操做動態顯示，例如 click 或者 mouseover。審查它們最直觀的方法是暫時更改你的 JavaScript 或 CSS 使它們默承認見，以便於你在無需模仿用戶操做的狀況下處理它。

但若是你在尋找一種更快捷的方法僅使用開發者工具讓元素可見，能夠遵循如下步驟：

1. 打開開發者工具
2. 打開 Sources 面板
3. 執行用戶操做讓對象可見（例如鼠標懸停）
4. 在元素可見的時候按下 F8（與「暫停腳本執行」按鈕相同）
5. 點擊開發者工具左上角的「選取元素」按鈕
6. 點擊頁面上的元素

咱們能夠經過 Bootstrap 的 tooltips 測試，只有鼠標懸浮在連接上觸發 JavaScript 它纔會顯示，下面是演示：

如你所見在 GIF 的開頭，我一開始沒法選中元素來審查它，由於鼠標一旦移開它就消失了。但若是我在它可見的時候中止腳本運行，它將保持可見狀態以便我能夠正確地檢查它。固然，若是元素只是簡單的 CSS :hover 效果，那麼我能夠用 Styles 面板的 「Toggle Element State」（:hov 按鈕）切換狀態來讓它顯示。但由 JavaScript 切換樣式的狀況下，中止腳本也許是獲取它們 CSS 樣式的最佳方法。

經過 CSS 選擇器尋找元素

你也許知道你能夠用內置功能（CTRL + F 或者 CMD + F）在 Elements 面板搜索一個元素。但注意看 「find」 欄，它會給你如下提示：

正如我在截圖中指出的那樣，你能夠經過字符串、選擇器以及 XPath 尋找元素。以前我一直都在使用字符串，直到最近我才意識到我可使用選擇器。

你不必定要使用你 CSS 中用過的選擇器，它能夠是任意合法的 CSS 選擇器。查找功能將告訴你選擇器是否與任何元素匹配。這對查找元素頗有用，還有助於測試選擇器是否有效。

下面是一個使用 body > div 選擇器來搜索以及遍歷 body 全部直接子 div 元素的 demo：

如上所述，這些搜索能夠經過任意合法選擇器完成，相似於 JavsScript 的 querySelector() 和 querySelectorAll() 方法。

直接編輯盒模型

盒模型是你開始使用 CSS 首先學習的東西之一。因爲這是 CSS 佈局的一個重要部分，開發者工具容許你直接編輯盒模型。

若是你審查了頁面上的一個元素，請在右側面板單擊 Styles 面板旁的 Computed 面板。你將看到該元素的可視化盒模型圖示，上面有各部分的數值：

也許你不知道，你能夠經過雙擊任意編輯它們的值：

所作的任何更改都會以與在 Styles 面板中編輯 CSS 時相同的方式反映在頁面上。

在 Styles 面板遞增或遞減屬性值

你可能已經意識到能夠在 Styles 面板中編輯 CSS。只需單擊屬性或值，而後鍵入更改便可。

但也許你沒有意識到數值能夠以不一樣的方式遞增或遞減。

• 上方向鍵 / 下方向鍵可使屬性值以 1 遞增 / 遞減
• ALT + 上方向鍵 / 下方向鍵可使屬性值以 0.1 遞增 / 遞減
• SHIFT + 上方向鍵 / 下方向鍵可使屬性值以 10 遞增 / 遞減
• CTRL + 上方向鍵 / 下方向鍵可使屬性值以 100 遞增 / 遞減

你也可使用 Page Up 或 Page Down 按鈕代替方向鍵。

Sources 面板的文本編輯器功能

比起別的地方，你也許更熟悉在 Styles 面板進行編輯，然而 Sources 面板是開發者工具中被高度低估一個功能，它模仿了常規代碼編輯器和 IDE 的工做方式。

如下是一些你能夠在 Sources 面板（打開開發者工具並點擊 「Sources」 按鈕）能夠作的有用的事情。

使用 CTRL 鍵進行多項選擇

若是須要在單個文件中選擇多個區域，能夠經過按住 CTRL 鍵並選擇所需內容來完成此操做，即便它不是連續文本也是如此。

在上面的 demo 中，我在 Sources 面板中選擇了 main.css 文件的三個任意部分，而後將它們粘貼迴文檔中。此外，你還能夠經過多個光標在多個地方進行同時輸入，使用 CTRL 鍵單擊多個位置便可。

使用 ALT 鍵選擇列

有的時候，你可能但願選擇一列文本，但一般狀況下沒法辦到。某些文本編輯器容許你使用 ALT 鍵來完成此操做，在 Sources 面板中也是如此。

使用 CTRL + SHIFT + O 組合鍵經過 CSS 選擇器搜索元素

在 Sources 面板打開文件後，按下 CTRL + SHIFT + O 組合鍵，能夠打開一個輸入框讓你跳轉到任意地方，這是 Sublime 一個著名的功能。

按下 CTRL + SHIFT + O 以後，你能夠輸入你在本文件中想查找元素的 CSS 選擇器，開發者工具會給你提供匹配選項，點擊可跳轉到文件的指定位置。

Chrome 和 Firefox 的響應式設計功能

你也許已經看過一些讓你只需點擊幾下就得以測試你的響應式佈局的網站，其實，你能夠用 Chrome 的設備模式作一樣的事情。

打開你的開發者工具，點擊左上角的 「Toggle device toolbar」 按鈕（快捷鍵 CTRL + SHIFT + M）：

如你所見，設備工具欄有多個選項可根據設備大小和設備類型更改視圖，你甚至能夠經過手動調整寬度和高度數值或拖動視口區域中的手柄來手動進行更改。

Firefox 附加的 「@media rules」 面板具備相似的功能，它容許你從站點的樣式表中單擊斷點。你能夠在下面的 demo 中看到我在個人一個網站上使用它。

開發者工具的顏色功能

在 CSS 中處理顏色值是常態。開發者工具讓能夠你更簡單地編輯、測試顏色值。如下是你能夠作的事情：

對比度

首先，開發者工具備查看可訪問性功能，當你在 Styles 面板看到 Color 屬性值時，你能夠點擊顏色值旁邊的方塊打開顏色採集器。在顏色採集器裏面，你將看到對比度選項指示你所選擇的文本顏色搭配背景是否有可訪問的對比度。

正如你在上面 demo 所看到的，顏色採集器在色譜中顯示出彎曲的白線。這個線表示最小可接受對比度開始和結束的位置。當我將顏色值移到白線上方時，對比度旁的綠勾將會消失，代表對比度較差。

調色板

除了查看可訪問性的功能以外，你還能夠訪問不一樣的調色板，包括 Material Design 調色板以及與當前查看頁面關聯的調色板。

切換顏色值語法

最後，在開發者工具中一個不爲人知的小知識是在查看顏色值時你能夠切換顏色值的語法。默認狀況下，Styles 面板會顯示 CSS 裏寫的顏色的語法。可是開發者工具容許你按住 shift，點擊顏色值左邊的小方塊，在 hex、RGBA 以及 HSLA 之間切換顏色值的語法：

編輯 CSS 陰影

text-shadow 和 box-shadow 的 CSS 手寫起來很乏味，語法很容易忘記，且兩種陰影的語法略有不一樣。

方便的是，Chrome 的開發者工具容許你使用可視化編輯器添加 text-shadow 或 box-shadow。

正如 demo 中顯示的，你能夠用 Styles 面板中任意樣式右下角的選項欄給任意元素添加 text-shadow 或 box-shadow。陰影添加後，你能夠用可視化編輯器編輯不一樣的屬性值。已存在的陰影能夠經過點擊屬性值左邊的小方塊從新呼出可視化編輯器。

Firefox 的 Grid 佈局檢查器

如今大多數經常使用的瀏覽器都支持 Grid 佈局，愈來愈多的開發者將它們用做默認的佈局方法。Firefox 的開發者工具現在把 Grid 選項做爲特點功能放到了 Layout 選項卡中。

這個功能容許你開啓一個全覆蓋的網格幫助可視化 Grid 佈局的不一樣部分。你還能夠顯示行號、區域名稱，甚至能夠選擇無限延伸網格線 —— 若是這對你有用的話。在示例 demo 中，我在使用 Jen Simmons 的示例網站，它是響應式的，所以當佈局由於不一樣視口改變時，你能夠看到可視化網格的好處。

Firefox 的 CSS filter 編輯器

filter 是如今幾乎在移動端和 PC 端都支持的另外一個新功能。Firefox 再次提供了一個好用的小工具幫助你編輯 filter 的值。

一旦你代碼裏有 filter（提示：若是你不知道實際語法，你能夠先寫上 filter: none），你將注意到 filter 值左邊有一個黑白相間的堆疊方塊，點擊它能夠打開 filter 編輯器。

你能夠給單個值加不一樣的 filter，刪除單個 filter 值，或者拖動 filter 從新排列它們的層次。

在 Chrome 的 Styles 面板編輯 CSS 動畫

在 Chrome 的 Styles 面板編輯靜態元素很是簡單，那麼編輯使用 animation 屬性以及 @keyframes 建立的動畫呢？

開發者工具備兩種編輯動畫的方法。首先，當你審查一個元素或者在 Elements 面板選擇一個元素，該元素的全部樣式都會出如今 Styles 面板 —— 包括已定義的 @keyframes。在下面的 demo 中，我選擇了一個帶動畫的元素，而後調整了一些關鍵幀設置。

但這並非所有，Chrome 的開發者工具提供了一個 Animation 面板讓你可使用可視化時間線編輯一個動畫及它的各個不一樣部分。你能夠經過點擊開發者工具右上方的 「Customize and control DevTools」 按鈕（三個豎點按鈕），選擇更多工具，開啓 Animations 面板。

如上所示，你能夠編輯每一個動畫元素的時間軸，而後在完成編輯後，你能夠瀏覽動畫以查看頁面上的更改。這是設計和調試複雜 CSS 動畫的一個很酷的功能！

在開發者工具中查看未使用的 CSS

最近有大量工具能夠幫助你追蹤未在特定頁面上使用的 CSS。這樣你就能夠選擇徹底刪除它們或僅在必要時加載它們。這將具備明顯的性能優點。

Chrome 容許你經過開發者工具的 「Coverage」 面板查看未使用的 CSS。這個面板能夠經過上文提到的點擊開發者面板右上角的 「Customize and control DevTools」 選項（三個豎點按鈕），選擇「更多工具」，找到 「Coverage」 開啓。

如 demo 所示，一旦你打開了 Coverage 面板，你能夠在 Sources 面板打開一個源文件。當文件打開時，你將注意到 CSS 文件中每條樣式右側都有綠色或紅色的線，指示樣式是否在當前頁面被應用。

總結

你的瀏覽器開發工具是 CSS 編輯和調試的寶庫。當你將以上建議與 Chrome 的功能例如 —— Workspaces（容許你把在開發者工具所作的變動保存到本地文件）—— 結合，整個調試過程會變得更加完整。

我但願這些技巧與建議將提高你在將來的項目中編輯與調試 CSS 的能力。

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。