大多數(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)按鈕),選擇