大多數開發者基本上都使用瀏覽器的開發者工具來調試前端，但即使用了好幾年Chrome 的開發者工具，我仍然會遇到從未見過的技巧和功能。
在本文中，我寫了許多在開發者工具中與 CSS 相關的功能和技巧，我認為它們將把你的 CSS 開發水平提升到一個新的台階。其中一些技巧不僅僅是針對 CSS，但我還是把它們放在了一起。
有些是有關於工作流程與除錯的簡單技巧，有些則是最近幾年推出的新功能。它們大多數基於 Chrome 的開發者工具，但也涵蓋了一些 Firefox 的技巧。
在開發者工具的 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 樣式的最佳方法。
你也許知道你可以用內建功能（CTRL F 或 CMD F）在 Elements 面板搜尋一個元素。但注意看“find” 欄，它會給你以下提示：
#正如我在截圖中指出的那樣，你可以透過字串、選擇器以及XPath 尋找元素。之前我一直都在使用字串，直到最近我才意識到我可以使用選擇器。
你不一定要使用你 CSS 中用過的選擇器，它可以是任意合法的 CSS 選擇器。查找功能將告訴你選擇器是否與任何元素相符。這對查找元素很有用，也有助於測試選擇器是否有效。
下面是一個使用body > div 選擇器來搜尋以及遍歷body 所有直接子div 元素的demo：
如上所述，這些搜尋可以透過任何合法選擇器完成，類似JavsScript 的 querySelector() 和 querySelectorAll() 方法。
盒模型是你開始使用 CSS 首先學習的東西之一。由於這是 CSS 佈局的一個重要部分，開發者工具允許你直接編輯盒模型。
如果你審查了頁面上的一個元素，請在右側面板點擊 Styles 面板旁的 Computed 面板。你將看到該元素的可視化盒模型圖示，上面有各部分的數值：
但是也許您不知道可以雙擊這些值來對其進行編輯：
所做的任何更改都會以與在Styles 面板中編輯CSS 時相同的方式反映在頁面上。
你可能已經意識到可以在 Styles 面板中編輯 CSS。只需單擊屬性或值，然後鍵入更改即可。
但也許你沒有意識到數值可以以不同的方式遞增或遞減。
上方向鍵/ 下方向鍵可以使屬性值以1 遞增/ 遞減
ALT 上方向鍵/ 下方向鍵可以使屬性值以0.1 遞增/ 遞減
SHIFT 上方向鍵/ 下方向鍵可以使屬性值以10 遞增/ 遞減
#CTRL 上方向鍵/ 下方向鍵可以讓屬性值以100 遞增/ 遞減
#你也可以使用Page Up 或Page Down 按鈕來取代方向鍵。
比起別的地方，你也許更熟悉在Styles 面板進行編輯，然而Sources 面板是開發者工具中被高度低估一個功能，它模仿了常規程式碼編輯器和IDE 的工作方式。
以下是一些你可以在 Sources 面板（開啟開發者工具並點擊 “Sources” 按鈕）可以做的有用的事情。
使用CTRL 鍵進行多項選擇
#如果需要在單一檔案中選擇多個區域，可以按住CTRL 鍵並選擇所需內容來完成此操作，即使它不是連續文字也是如此。
在上面的 demo 中，我在 Sources 面板中選擇了 main.css 檔案的三個任意部分，然後將它們貼回文件中。此外，你還可以透過多個遊標在多個地方進行同時輸入，使用 CTRL 鍵點擊多個位置即可。
使用 ALT 鍵選擇列
有的時候，你可能想要選擇一列文本，但通常無法完成。某些文字編輯器允許你使用 ALT 鍵來完成此操作，在 Sources 面板中也是如此。
在Sources 面板開啟檔案後，按下CTRL SHIFT O 組合鍵，可以開啟一個輸入框讓你跳到任意地方，這是Sublime 一個著名的功能。
按下 CTRL SHIFT O 之後，你可以輸入你在本檔案中想找出元素的 CSS 選擇器，開發者工具會提供你匹配選項，點擊可跳到檔案的指定位置。
你也許已經看過一些讓你只需點擊幾下就得以測試你的響應式佈局的網站，其實，你可以用Chrome 的設備模式做同樣的事情。
開啟你的開發者工具，點擊左上角的「Toggle device toolbar」按鈕（快速鍵CTRL SHIFT M）：
如你所見，設備工具列有多個選項可根據設備大小和設備類型更改視圖，你甚至可以透過手動調整寬度和高度數值或拖曳視口區域中的手柄來手動進行更改。
Firefox 附加的 “@media rules” 面板具有類似的功能，它允許你從網站的樣式表中點選斷點。你可以在下面的 demo 中看到我在我的一個網站上使用它。
在 CSS 中處理顏色值是常態。開發者工具讓可以你更簡單地編輯、測試顏色值。以下是你可以做的事情：
對比
#首先，開發者工具有查看可訪問性功能，當你在Styles 面板看到Color 屬性值時，可以點選顏色值旁邊的方塊來開啟顏色擷取器。在顏色採集器裡面，你將看到對比選項指示你所選擇的文字顏色搭配背景是否有可訪問的對比。
如你在上面 demo 所看到的，顏色採集器在色譜中顯示出彎曲的白線。這條線表示最小可接受對比開始和結束的位置。當我將顏色值移到白線上方時，對比旁的綠勾將會消失，表示對比較差。
調色板
除了查看可訪問性的功能之外，你還可以存取不同的調色板，包括Material Design 調色板以及與目前檢視頁面關聯的調色板。
切換顏色值語法
#最後，在開發者工具中一個鮮為人知的小知識是在查看顏色值時你可以切換顏色值的語法。預設情況下，Styles 面板會顯示 CSS 裡寫的顏色的語法。但開發者工具允許你按住shift，點擊顏色值左邊的小方塊，在hex、RGBA 以及HSLA 之間切換顏色值的語法：
filter: none），你會注意到filter 值左邊有一個黑白相間的堆疊方塊，點擊它可以開啟filter 編輯器。
animation屬性以及@keyframes 創建的動畫呢？
@keyframes。在下面的 demo 中，我選擇了一個帶有動畫的元素，然後調整了一些關鍵影格設定。
Chrome 允許你透過開發者工具的 “Coverage” 面板查看未使用的 CSS。這個面板可以透過上文提到的點擊開發者面板右上角的 “Customize and control DevTools” 選項（三個豎點按鈕），選擇“更多工具”，找到 “Coverage” 開啟。
如 demo 所示，一旦你打開了 Coverage 面板，你可以在 Sources 面板中開啟一個原始檔。當檔案開啟時，你會注意到 CSS 檔案中每個樣式右側都有綠色或紅色的線，指示樣式是否在目前頁面被套用。
你的瀏覽器開發工具是 CSS 編輯和偵錯的寶庫。當你將以上建議與 Chrome 的功能例如 —— Workspaces（允許你把在開發者工具所做的變更保存到本地文件）—— 結合，整個調試過程會變得更加完整。
我希望這些技巧與建議將提升你在未來的專案中編輯與調試 CSS 的能力。
以上是16 個CSS開發中需要了解的DevTools技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！
