今天為大家介紹一款瀏覽器插件—CSS Peeper ，有了這款chrome 插件，設計師可以不再需要挖掘代碼，因為CSS Peeper可以非常方便的查看網頁中的css樣式。總結一句話就是讓設計師專註於設計，並在代碼中花費儘可能少的時間。
前段時間我們團隊創建了名為CSS Peeper的 Chrome擴展程序，讓設計師在工作中更加輕鬆。曾經我們時常想知道網站上的行高，字體或按鈕大小是多少，現在我們為您提供滿足您設計好奇心的終極工具。
下面你會看到一個關於這個工具是如何開發的簡短故事，以及我們通過Chrome擴展程序為您提供有哪些功能。
背景故事
想象一下，您正在重新設計數字產品而沒有風格指南可供參考。您可能要做的第一件事就是去產品網站檢查設計系統和品牌的本質：顏色，排版，間距以及尋找特定的圖像或圖標。
你可能想要檢查一些現有的CSS樣式，獲取調色板或下載一些可能有用的素材。問題是：如果不深入瀏覽器的代碼檢查器，您如何獲得這些？
作為Chrome用戶，我去尋找一個基本上可以為我解決這些問題的擴展。我發現了很多不同的插件：設計很差，只解決小問題，都不是以用戶為中心。他們中的許多設計都沒有注重細節和可用性問題。
事實上，這些插件都沒有完全解決我的問題，也沒有完美的解決方案。
基本上我無法找到符合我所有需求的Chrome擴展程序。我決定問其他設計師他們是否曾經找到類似的工具。令人驚訝的是，他們會用到非常多的擴展程序去解決當前的問題，這對設計師而言勢必是很麻煩的一件事。
我一直希望為每位設計師提供類似瑞士軍刀的擴展。這就是我們決定創建CSS Peeper的原因。
經過幾個小時的搜索，我決定從零開始創造新的擴展工具。這個想法變成了一個名為CSS Peeper的項目。我已經向我的朋友JędrzejDadowski提出了這個設計概念，他是一位出色的前端開發人員，一切就緒，馬上開工！
認識CSS Peeper
我們追求的目標很簡單，它必須是一個不太複雜而方便的代碼檢查器，並且它能給我展示所有必要的樣式。在這些需求的推動下，我為這款工具定義了需求清單：
- 檢查Web上可用的樣式，而無需切換插件。
- 快速瀏覽網站上使用的排版（字體系列，大小，行高等）。
- 能夠在不檢查網站的情況下查看網站上的所有顏色。
- 檢查單個元素以獲得大小，填充和樣式效果，如陰影，懸停狀態等。
- 只需點擊一下即可下載素材（pngs，svgs，jpgs等）。
- 最佳用戶體驗的UI設計。
- 以簡單，組織良好和美觀的方式提供所有信息。
就是這樣子，上面所列的需求被轉換為第一版CSS Peeper的所有功能。
滿足設計師的期望
我想到的第一件事就是UI的簡潔和美觀。其實為設計師設計一款工具是一件非常困難的事情。我們必須要看到其他人沒有看到的要素，並且界面留給別人的第一印象一定要深刻，使用起來非常愉悅而又完美無瑕。
選擇要檢查的項目
我們擴展工具的核心功能：當您啟動它時，您可以單擊網站上的不同對象，如按鈕，標題，背景和您要檢查的任何內容。
因此，您將獲得所選對象的完整信息，並提供一些便於在Sketch或Photoshop中使用的參數屬性。
CSS Peeper允許您檢查網站上使用的所有顏色。您可以通過在幾秒鐘內就可以找到你所需要的顏色參數。
我們計劃添加快速複製選項，並可以在不同的顏色值（如HSL或RGB）之間切換。如果您在使用過程看到更多改進的空間，請告訴我們，我們將實現這一目標！
下載素材
如果您曾嘗試從代碼中最深的嵌套中提取某些資源（如圖像，svg圖標等），那你一定會非常喜歡我們開發的下載資源功能。
CSS Peeper為您簡化了繁瑣的工作，您無需深入挖掘代碼。因為我們提供逐個下載資源或將它們全部打包為.zip文件的功能。
到目前為止發生了什麼
我們真的很高興地宣布，自CSS Peeper推出以來，我們目前擁有超過16,000名用戶！太棒了！除了這個數字，我們收集了數百條積極意見，並從我們的用戶那裡獲得了一些非常有價值的反饋。下面你可以找到那段時間的一些有趣的圖表。
2016年12月19日至2017年1月2日期間收集的數據
發布後差不多三天，關於CSS Peeper的消息傳開了，我們在最受歡迎的設計博客中被推薦：
我們受到了來自世界各地的數百名設計師的熱烈歡迎。這是一種激勵，並使我們有能力開發CSS Peeper……
我們需要您的意見！
目前我們已經提供了可以免費下載並使用產品，我們希望擴展工具可以滿足用戶需求。我們對這個小產品有自己的看法，但我們也想直接聽取您的意見！
或者直接下載
我們真的很想從設計師自己那裡聽到更多，並了解他們對使用CSS Peeper的感受，以便我們可以設計以用戶為中心的工具。您的所有建議和想法對我們來說都是非常寶貴的！
如果您有任何問題，建議或只是想表達您的支持 – 我們建議您發表評論或在Twitter或Facebook上找到我們。
如果你喜歡你所讀的內容，別忘了點亮下面的小心！
