CSS Peeper是一款專業(yè)智能的CSS查看器插件，有了這款chrome 插件，設計師可以不再需要挖掘代碼，因為CSS Peeper可以非常方便的查看網(wǎng)頁中的css樣式?？偨Y一句話就是讓設計師專注于設計，并在代碼中花費盡可能少的時間。歡迎需要此款插件的朋友前來下載使用。

概述

?? 無需再挖掘代碼。以簡單、有條理且美觀的方式檢查樣式。立即獲??！

CSS Peeper 是為設計師量身定制的 CSS 查看器。使用我們的 Chrome 擴展程序訪問有用的樣式。我們的使命是讓設計師專注于設計，并盡可能少地花時間挖掘代碼。

有沒有想過網(wǎng)站上的行高、字體或按鈕大小是多少？我們?yōu)槟峁M足您好奇心的終極工具。我們使您能夠以最簡單的方式檢查代碼。檢查網(wǎng)絡上對象、顏色和資產(chǎn)的隱藏 CSS 樣式。

認識CSS Peeper

我們追求的目標很簡單，它必須是一個不太復雜而方便的代碼檢查器，并且它能給我展示所有必要的樣式。在這些需求的推動下，我為這款工具定義了需求清單：

檢查Web上可用的樣式，而無需切換插件。

快速瀏覽網(wǎng)站上使用的排版（字體系列，大小，行高等）。

能夠在不檢查網(wǎng)站的情況下查看網(wǎng)站上的所有顏色。

檢查單個元素以獲得大小，填充和樣式效果，如陰影，懸停狀態(tài)等。

只需點擊一下即可下載素材（pngs，svgs，jpgs等）。

最佳用戶體驗的UI設計。

以簡單，組織良好和美觀的方式提供所有信息。

就是這樣子，上面所列的需求被轉換為第一版CSS Peeper的所有功能。

滿足設計師的期望

我想到的第一件事就是UI的簡潔和美觀。其實為設計師設計一款工具是一件非常困難的事情。我們必須要看到其他人沒有看到的要素，并且界面留給別人的第一印象一定要深刻，使用起來非常愉悅而又完美無瑕。

選擇要檢查的項目

我們擴展工具的核心功能：當您啟動它時，您可以單擊網(wǎng)站上的不同對象，如按鈕，標題，背景和您要檢查的任何內容。

因此，您將獲得所選對象的完整信息，并提供一些便于在Sketch或Photoshop中使用的參數(shù)屬性。

CSS Peeper允許您檢查網(wǎng)站上使用的所有顏色。您可以通過在幾秒鐘內就可以找到你所需要的顏色參數(shù)。

我們計劃添加快速復制選項，并可以在不同的顏色值（如HSL或RGB）之間切換。如果您在使用過程看到更多改進的空間，請告訴我們，我們將實現(xiàn)這一目標！

下載素材

如果您曾嘗試從代碼中最深的嵌套中提取某些資源（如圖像，svg圖標等），那你一定會非常喜歡我們開發(fā)的下載資源功能。

CSS Peeper為您簡化了繁瑣的工作，您無需深入挖掘代碼。因為我們提供逐個下載資源或將它們全部打包為.zip文件的功能。

插件安裝方法

方法一：.crx文件格式插件安裝

1.首先用戶點擊谷歌瀏覽器右上角的自定義及控制按鈕，在下拉框中選擇設置。

2.在打開的谷歌瀏覽器的擴展管理器最左側選擇擴展程序或直接輸入：chrome://extensions/

3.找到自己已經(jīng)下載好的Chrome離線安裝文件xxx.crx，然后將其從資源管理器中拖動到Chrome的擴展管理界面中，這時候用戶會發(fā)現(xiàn)在擴展管理器的中央部分中會多出一個”拖動以安裝“的插件按鈕。

4.松開鼠標就可以把當前正在拖動的插件安裝到谷歌瀏覽器中去，但是谷歌考慮用戶的安全隱私，在用戶松開鼠標后還會給予用戶一個確認安裝的提示。

5.用戶這時候只需要點擊添加按鈕就可以把該離線Chrome插件安裝到谷歌瀏覽器中去，安裝成功以后該插件會立即顯示在瀏覽器右上角（如果有插件按鈕的話），如果沒有插件按鈕的話，用戶還可以通過Chrome擴展管理器找到已經(jīng)安裝的插件。

方法二：文件夾格式插件安裝

1.首先用戶點擊谷歌瀏覽器右上角的自定義及控制按鈕，在下拉框中選擇設置。

2.在打開的谷歌瀏覽器的擴展管理器最左側選擇擴展程序。

3.勾選開發(fā)者模式，點擊加載已解壓的擴展程序，將文件夾選擇即可安裝插件。

如果你在安裝過程中出現(xiàn)下圖中的錯誤程序包無效 CRX_HEADER_INVALID

可以參考：超詳細的Chrome 瀏覽器/瀏覽器插件安裝教程(全方法) 一文解決