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

易于安裝和終身許可證

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

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

開始

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

在這里，您可以設置首選選項，例如單擊時會發生什么，是否復制子元素或html代碼的CSS，在屏幕上顯示的內容等。能夠自定義和調整您的體驗和用法非常方便。

準備就緒后，只需將鼠標懸停在頁面上的任何元素上即可查看其CSS。

與瀏覽器開發工具相反，您不必滾動瀏覽無數的CSS規則。與指定元素相關的所有內容都會顯示出來，只需單擊一下即可輕松復制。在一個位置查看和復制所有子元素、偽類和媒體查詢！

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

導出到代碼筆

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

你應該使用CSS Scan嗎？

當然，雖然CSS Scan是付費的，但對于您獲得的所有內容都非常合理，它將立即更改您的工作流程，并有一個快速簡便的調整期，遠離開發工具。我們唯一能找到的就是能夠調整窗口大小以進行響應式測試。我們必須在開發工具中執行此操作，然后從那里使用CSS Scan，這仍然有效，但似乎是一個額外的步驟。但是，CSS Scan會同時顯示和復制元素的所有相關媒體查詢，因此這比僅查看當前窗口大小的活動媒體查詢（如在開發工具中所做的那樣）更方便。把這歸咎于習慣于做與我們過去習慣做的事情不同的事情。

總而言之，在嘗試CSS Scan后，我們可以自信地強烈推薦它！