從網(wǎng)站檢查中復(fù)制CSS代碼的最簡單方法

時間：2024-05-10 09:30:01 | 來源：建站知識

時間：2024-05-10 09:30:01 來源：建站知識

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

易于安裝和終身許可證

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

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

開始

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

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

準(zhǔn)備就緒后，只需將鼠標(biāo)懸停在頁面上的任何元素上即可查看其CSS。

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

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

導(dǎo)出到代碼筆

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

你應(yīng)該使用CSS Scan嗎？

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

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