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

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

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

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

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

有時(shí)一個(gè)元素會(huì)因?yàn)橐恍┗?JavaScript 的用戶操作動(dòng)態(tài)顯示，例如 click 或者 mouseover。審查它們最直觀的方法是暫時(shí)更改你的 JavaScript 或 CSS 使它們默認(rèn)可見，以便于你在無需模仿用戶操作的情況下處理它。

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

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

2、打開 Sources 面板

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

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

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

6、點(diǎn)擊頁(yè)面上的元素

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

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

通過CSS選擇器搜索元素

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

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

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

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

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

直接編輯盒模型

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

如果你審查了頁(yè)面上的一個(gè)元素，請(qǐng)?jiān)谟覀?cè)面板單擊 Styles 面板旁的 Computed 面板。你將看到該元素的可視化盒模型圖示，上面有各部分的數(shù)值：

但是也許您不知道可以雙擊這些值來對(duì)其進(jìn)行編輯：

所做的任何更改都會(huì)以與在 Styles 面板中編輯 CSS 時(shí)相同的方式反映在頁(yè)面上。

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

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

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

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

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

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

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

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

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

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

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

使用 CTRL 鍵進(jìn)行多項(xiàng)選擇

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

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

使用 ALT 鍵選擇列

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

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

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

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

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

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

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

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

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

DevTools的顏色功能

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

對(duì)比度

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

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

調(diào)色板

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

切換顏色值語法

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

編輯 CSS 陰影

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

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

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

Firefox 的 Grid 布局檢查器

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

這個(gè)功能允許你開啟一個(gè)全覆蓋的網(wǎng)格幫助可視化 Grid 布局的不同部分。你還可以顯示行號(hào)、區(qū)域名稱，甚至可以選擇無限延伸網(wǎng)格線 —— 如果這對(duì)你有用的話。在示例 demo 中，我在使用 Jen Simmons 的示例網(wǎng)站，它是響應(yīng)式的，因此當(dāng)布局因?yàn)椴煌暱诟淖儠r(shí)，你可以看到可視化網(wǎng)格的好處。

Firefox 的 CSS filter 編輯器

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

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

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

在 Chrome 的 Styles 面板編輯 CSS 動(dòng)畫

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

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

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