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

概述

?? 無需再挖掘代碼。以簡(jiǎn)單、有條理且美觀的方式檢查樣式。立即獲?。?/p>

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

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

認(rèn)識(shí)CSS Peeper

我們追求的目標(biāo)很簡(jiǎn)單，它必須是一個(gè)不太復(fù)雜而方便的代碼檢查器，并且它能給我展示所有必要的樣式。在這些需求的推動(dòng)下，我為這款工具定義了需求清單：

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

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

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

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

只需點(diǎn)擊一下即可下載素材（pngs，svgs，jpgs等）。

最佳用戶體驗(yàn)的UI設(shè)計(jì)。

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

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

滿足設(shè)計(jì)師的期望

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

選擇要檢查的項(xiàng)目

我們擴(kuò)展工具的核心功能：當(dāng)您啟動(dòng)它時(shí)，您可以單擊網(wǎng)站上的不同對(duì)象，如按鈕，標(biāo)題，背景和您要檢查的任何內(nèi)容。

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

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

我們計(jì)劃添加快速?gòu)?fù)制選項(xiàng)，并可以在不同的顏色值（如HSL或RGB）之間切換。如果您在使用過程看到更多改進(jìn)的空間，請(qǐng)告訴我們，我們將實(shí)現(xiàn)這一目標(biāo)！

下載素材

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

CSS Peeper為您簡(jiǎn)化了繁瑣的工作，您無需深入挖掘代碼。因?yàn)槲覀兲峁┲饌€(gè)下載資源或?qū)⑺鼈內(nèi)看虬鼮?zip文件的功能。

插件安裝方法

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

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

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

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

4.松開鼠標(biāo)就可以把當(dāng)前正在拖動(dòng)的插件安裝到谷歌瀏覽器中去，但是谷歌考慮用戶的安全隱私，在用戶松開鼠標(biāo)后還會(huì)給予用戶一個(gè)確認(rèn)安裝的提示。

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

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

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

2.在打開的谷歌瀏覽器的擴(kuò)展管理器最左側(cè)選擇擴(kuò)展程序。

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

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

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