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

在本文中，我寫了許多在開發(fā)者工具中與 CSS 相關(guān)的功能和技巧，我認為它們將把你的 CSS 開發(fā)水平提升至一個新的臺階。其中一些技巧不僅僅針對 CSS，但是我還是把它們放在了一起。

一些是有關(guān)于工作流與調(diào)試的簡單技巧，另一些則是最近幾年推出的新功能。它們大多數(shù)基于 Chrome 的開發(fā)者工具，但也涵蓋了一些 Firefox 的技巧。

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

在開發(fā)者工具的 Elements 面板查找大多數(shù)元素的 CSS 并不困難。大多數(shù)情況下你只需要右鍵該元素，點擊檢查，然后（如有必要）仔細點在 Elements 面板找到它。一旦元素被選中，它的 CSS 會出現(xiàn)在 Styles 面板，隨時可以編輯。

有時一個元素會因為一些基于 JavaScript 的用戶操作動態(tài)顯示，例如 click 或者 mouseover。審查它們最直觀的方法是暫時更改你的 JavaScript 或 CSS 使它們默認可見，以便于你在無需模仿用戶操作的情況下處理它。

但如果你在尋找一種更快捷的方法僅使用開發(fā)者工具讓元素可見，可以遵循以下步驟：

1、打開開發(fā)者工具

2、打開 Sources 面板

3、執(zhí)行用戶操作讓對象可見（例如鼠標懸停）

4、在元素可見的時候按下 F8（與“暫停腳本執(zhí)行”按鈕相同）

5、點擊開發(fā)者工具左上角的“選取元素”按鈕

6、點擊頁面上的元素

我們可以通過 Bootstrap 的 tooltips 測試，只有鼠標懸浮在鏈接上觸發(fā) JavaScript 它才會顯示，下面是演示：

如你所見在 GIF 的開頭，我一開始無法選中元素來審查它，因為鼠標一旦移開它就消失了。但如果我在它可見的時候停止腳本運行，它將保持可見狀態(tài)以便我可以正確地檢查它。當(dāng)然，如果元素只是簡單的 CSS :hover 效果，那么我可以用 Styles 面板的 “Toggle Element State”（:hov 按鈕）切換狀態(tài)來讓它顯示。但由 JavaScript 切換樣式的情況下，停止腳本也許是獲取它們 CSS 樣式的最佳方法。

通過CSS選擇器搜索元素

你也許知道你可以用內(nèi)置功能（CTRL + F 或者 CMD + F）在 Elements 面板搜索一個元素。但注意看 “find” 欄，它會給你以下提示：

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

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

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

如上所述，這些搜索可以通過任意合法選擇器完成，類似于 JavsScript 的 querySelector() 和 querySelectorAll() 方法。

直接編輯盒模型

盒模型是你開始使用 CSS 首先學(xué)習(xí)的東西之一。由于這是 CSS 布局的一個重要部分，開發(fā)者工具允許你直接編輯盒模型。

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

但是也許您不知道可以雙擊這些值來對其進行編輯：

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

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

你可能已經(jīng)意識到可以在 Styles 面板中編輯 CSS。只需單擊屬性或值，然后鍵入更改即可。

但也許你沒有意識到數(shù)值可以以不同的方式遞增或遞減。

• 上方向鍵 / 下方向鍵可以使屬性值以 1 遞增 / 遞減

• ALT + 上方向鍵 / 下方向鍵可以使屬性值以 0.1 遞增 / 遞減

• SHIFT + 上方向鍵 / 下方向鍵可以使屬性值以 10 遞增 / 遞減

• CTRL + 上方向鍵 / 下方向鍵可以使屬性值以 100 遞增 / 遞減

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

“Sources”面板的文本編輯器功能

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

以下是一些你可以在 Sources 面板（打開開發(fā)者工具并點擊 “Sources” 按鈕）可以做的有用的事情。

使用 CTRL 鍵進行多項選擇

如果需要在單個文件中選擇多個區(qū)域，可以通過按住 CTRL 鍵并選擇所需內(nèi)容來完成此操作，即使它不是連續(xù)文本也是如此。

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

使用 ALT 鍵選擇列

有的時候，你可能希望選擇一列文本，但通常情況下無法辦到。某些文本編輯器允許你使用 ALT 鍵來完成此操作，在 Sources 面板中也是如此。

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

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

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

Chrome 和 Firefox 的響應(yīng)式設(shè)計功能

你也許已經(jīng)看過一些讓你只需點擊幾下就得以測試你的響應(yīng)式布局的網(wǎng)站，其實，你可以用 Chrome 的設(shè)備模式做同樣的事情。

打開你的開發(fā)者工具，點擊左上角的 “Toggle device toolbar” 按鈕（快捷鍵 CTRL + SHIFT + M）：

如你所見，設(shè)備工具欄有多個選項可根據(jù)設(shè)備大小和設(shè)備類型更改視圖，你甚至可以通過手動調(diào)整寬度和高度數(shù)值或拖動視口區(qū)域中的手柄來手動進行更改。

Firefox 附加的 “@media rules” 面板具有類似的功能，它允許你從站點的樣式表中單擊斷點。你可以在下面的 demo 中看到我在我的一個網(wǎng)站上使用它。

DevTools的顏色功能

在 CSS 中處理顏色值是常態(tài)。開發(fā)者工具讓可以你更簡單地編輯、測試顏色值。以下是你可以做的事情：

對比度

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

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

調(diào)色板

除了查看可訪問性的功能之外，你還可以訪問不同的調(diào)色板，包括 Material Design 調(diào)色板以及與當(dāng)前查看頁面關(guān)聯(lián)的調(diào)色板。

切換顏色值語法

最后，在開發(fā)者工具中一個鮮為人知的小知識是在查看顏色值時你可以切換顏色值的語法。默認情況下，Styles 面板會顯示 CSS 里寫的顏色的語法。但是開發(fā)者工具允許你按住 shift，點擊顏色值左邊的小方塊，在 hex、RGBA 以及 HSLA 之間切換顏色值的語法：

編輯 CSS 陰影

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

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

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

Firefox 的 Grid 布局檢查器

現(xiàn)在大多數(shù)常用的瀏覽器都支持 Grid 布局，越來越多的開發(fā)者將它們用作默認的布局方法。Firefox 的開發(fā)者工具如今把 Grid 選項作為特色功能放到了 Layout 選項卡中。

這個功能允許你開啟一個全覆蓋的網(wǎng)格幫助可視化 Grid 布局的不同部分。你還可以顯示行號、區(qū)域名稱，甚至可以選擇無限延伸網(wǎng)格線 —— 如果這對你有用的話。在示例 demo 中，我在使用 Jen Simmons 的示例網(wǎng)站，它是響應(yīng)式的，因此當(dāng)布局因為不同視口改變時，你可以看到可視化網(wǎng)格的好處。

Firefox 的 CSS filter 編輯器

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

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

您可以將多個過濾器添加到單個值，刪除單個過濾器值，還可以拖放單個過濾器以重新排列其應(yīng)用順序。

在 Chrome 的 Styles 面板編輯 CSS 動畫

在 Chrome 的 Styles 面板編輯靜態(tài)元素非常簡單，那么編輯使用 animation 屬性以及 @keyframes 創(chuàng)建的動畫呢？

開發(fā)者工具有兩種編輯動畫的方法。首先，當(dāng)你審查一個元素或者在 Elements 面板選擇一個元素，該元素的所有樣式都會出現(xiàn)在 Styles 面板 —— 包括已定義的 @keyframes。在下面的 demo 中，我選擇了一個帶動畫的元素，然后調(diào)整了一些關(guān)鍵幀設(shè)置。

但這并不是全部，Chrome 的開發(fā)者工具提供了一個 Animation 面板讓你可以使用可視化時間線編輯一個動畫及它的各個不同部分。你可以通過點擊開發(fā)者工具右上方的 “Customize and control DevTools” 按鈕（三個豎點按鈕），選擇