久久久久久久视色,久久电影免费精品,中文亚洲欧美乱码在线观看,在线免费播放AV片

<center id="vfaef"><input id="vfaef"><table id="vfaef"></table></input></center>

    <p id="vfaef"><kbd id="vfaef"></kbd></p>

    
    
    <pre id="vfaef"><u id="vfaef"></u></pre>

      <thead id="vfaef"><input id="vfaef"></input></thead>

    1. 站長(zhǎng)資訊網(wǎng)
      最全最豐富的資訊網(wǎng)站

      16 個(gè)CSS開發(fā)中需要了解的DevTools技巧

      16 個(gè)CSS開發(fā)中需要了解的DevTools技巧

      大多數(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ì)顯示,下面是演示:

      16 個(gè)CSS開發(fā)中需要了解的DevTools技巧

      如你所見在 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ì)給你以下提示:

      16 個(gè)CSS開發(fā)中需要了解的DevTools技巧

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

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

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

      16 個(gè)CSS開發(fā)中需要了解的DevTools技巧

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

      直接編輯盒模型

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

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

      16 個(gè)CSS開發(fā)中需要了解的DevTools技巧

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

      16 個(gè)CSS開發(fā)中需要了解的DevTools技巧

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

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

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

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

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

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

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

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

      16 個(gè)CSS開發(fā)中需要了解的DevTools技巧

      你也可以使用 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ù)文本也是如此。

      16 個(gè)CSS開發(fā)中需要了解的DevTools技巧

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

      使用 ALT 鍵選擇列

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

      16 個(gè)CSS開發(fā)中需要了解的DevTools技巧

      使用 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)到文件的指定位置。

      16 個(gè)CSS開發(fā)中需要了解的DevTools技巧

      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):

      16 個(gè)CSS開發(fā)中需要了解的DevTools技巧

      如你所見,設(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)站上使用它。

      16 個(gè)CSS開發(fā)中需要了解的DevTools技巧

      DevTools的顏色功能

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

      對(duì)比度

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

      16 個(gè)CSS開發(fā)中需要了解的DevTools技巧

      正如你在上面 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)色板。

      16 個(gè)CSS開發(fā)中需要了解的DevTools技巧

      切換顏色值語法

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

      16 個(gè)CSS開發(fā)中需要了解的DevTools技巧

      編輯 CSS 陰影

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

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

      16 個(gè)CSS開發(fā)中需要了解的DevTools技巧

      正如 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)卡中。

      16 個(gè)CSS開發(fā)中需要了解的DevTools技巧

      這個(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 編輯器。

      16 個(gè)CSS開發(fā)中需要了解的DevTools技巧

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

      16 個(gè)CSS開發(fā)中需要了解的DevTools技巧

      在 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è)置。

      16 個(gè)CSS開發(fā)中需要了解的DevTools技巧

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

      贊(0)
      分享到: 更多 (0)
      網(wǎng)站地圖   滬ICP備18035694號(hào)-2    滬公網(wǎng)安備31011702889846號(hào)