在處理網站項目時，您是否曾經對使用開(kāi)發工(gōng)具感到沮喪？必須在您正在處理的網頁和檢查器之間來回切換以查看CSS并進行調整通常可能是一(yī)個挑戰。值得慶幸的是，有一(yī)個浏覽器擴展程序可以簡化該過程：CSS Scan。在本文中(zhōng)，我(wǒ)(wǒ)們将看看這個令人興奮的工(gōng)具如何改變您作爲Web開(kāi)發人員(yuán)的生(shēng)活，或者至少加快您的工(gōng)作流程。

易于安裝和終身許可證

開(kāi)始使用CSS Scan非常簡單，因爲它是一(yī)個浏覽器擴展/附加組件。無論您喜歡哪種浏覽器，都可以在Chrome，火(huǒ)狐，Safari和Edge上安裝CSS Scan。由于這是高級擴展，因此您必須先購買許可證，但它是終身許可證，因此它是一(yī)次性購買，然後可以同時在3個浏覽器或設備上使用。

考慮到所有這些以及您通過此許可證獲得的内容，常規的一(yī)次性購買價格爲120美元，感覺是有點貴。但實際上CSS Scan通常以折扣價出售，因此您可以以更低的成本購買。您甚至可以在購買前在網站上試用它，以确保它像我(wǒ)(wǒ)們所說的那樣好。

開(kāi)始

安裝擴展程序後，您所要做的就是右鍵單擊網頁，然後從菜單中(zhōng)選擇“使用CSS Scan進行檢查”。工(gōng)具欄将出現在窗口的右上角（如果您願意，也可以将其移動到底部）。

在這裏，您可以設置首選選項，例如單擊時會發生(shēng)什麽，是否複制子元素或HTML代碼的CSS，在屏幕上顯示的内容等。能夠自定義和調整您的體(tǐ)驗和用法非常方便。

準備就緒後，隻需将鼠标懸停在頁面上的任何元素上即可查看其CSS。

與浏覽器開(kāi)發工(gōng)具相反，您不必滾動浏覽無數的CSS規則。與指定元素相關的所有内容都會顯示出來，隻需單擊一(yī)下(xià)即可輕松複制。在一(yī)個位置查看和複制所有子元素、僞類和媒體(tǐ)查詢！

要就地編輯CSS，您隻需點擊空格鍵，CSS掃描窗口就會固定到屏幕上。然後，您可以根據自己的意願進行編輯，就在您正在處理的頁面上。您還可以通過按住控件并單擊元素或使用向上和向下(xià)箭頭鍵來查看父元素的 CSS。

導出到代碼筆

更進一(yī)步，您可以輕松地将元素的HTML和CSS及其所有子元素作爲整個組件導出到Codepen。隻需将鼠标懸停在要導出的元素上，點擊空格鍵将其固定到屏幕上，然後單擊“導出到Codepen”按鈕。瞧！您的元素現在在您的Codepen帳戶中(zhōng)！現在，該元素可供您在将來的項目中(zhōng)使用或嘗試您想要的任何方式。

你應該使用CSS Scan嗎(ma)？

當然，雖然CSS Scan是付費(fèi)的，但對于您獲得的所有内容都非常合理，它将立即更改您的工(gōng)作流程，并有一(yī)個快速簡便的調整期，遠離(lí)開(kāi)發工(gōng)具。我(wǒ)(wǒ)們唯一(yī)能找到的就是能夠調整窗口大(dà)小(xiǎo)以進行響應式測試。我(wǒ)(wǒ)們必須在開(kāi)發工(gōng)具中(zhōng)執行此操作，然後從那裏使用CSS Scan，這仍然有效，但似乎是一(yī)個額外(wài)的步驟。但是，CSS Scan會同時顯示和複制元素的所有相關媒體(tǐ)查詢，因此這比僅查看當前窗口大(dà)小(xiǎo)的活動媒體(tǐ)查詢（如在開(kāi)發工(gōng)具中(zhōng)所做的那樣）更方便。把這歸咎于習慣于做與我(wǒ)(wǒ)們過去(qù)習慣做的事情不同的事情。