B 端設計師在工作當中一定會遇到這樣的情況：因為上線的項目與設計稿不符而與前端進行爭論、為了知道開發顏色使用是否準確只有“截圖”，然后在設計軟件當中“吸色”來進行判斷。

所以在我們工作當中設計走查就成為項目流程當中非常重要的一環。雖然走查的流程往往比較復雜無聊，但是為了保證設計稿與上線項目的一致，我們就需要有“趁手的武器”才能夠項目的高度還原。不知道你們自己有什么好用的走查神器，我今天給大家分享兩款我自己非常常用的瀏覽器插件：

Copiexl

這是一款字節跳動出品的高效走查插件，它的原理十分簡單，首先打開需要校驗的線上項目;接著上傳你的設計稿圖片;然后通過降低設計稿的透明度，達到項目快速走查的目的。開發哪里有問題，一眼便知。簡單教大家如何安裝使用這樣一款插件：

1. 安裝方法：

首先打開軟件的官方網站( https://copixel.bytedance.com/ )，點擊免費下載(這里只支持 Chrome 瀏覽器，如果你是 Safari、Firefox、Opera 等瀏覽器，在官網往下滾動，同樣也是提供了下載入口)

點擊下載過后，就會跳轉到 Google 的應用商店當中，點擊安裝即可，與瀏覽器插件的安裝方式類似(這里需要搭梯子)

2. 使用教程

選擇合適的頁面設計尺寸

建議按照主流窗口尺寸的寬度設計，如：1366px、1440px、1920px;推薦最小設計尺寸使用 1366px、1440px，最大設計尺寸 1920px(寬)。目的是按照 1:1 導出設計圖，與開發頁面顯示效果一致

該如何輸出設計稿?

Copiexl 瀏覽器插件的原理是將你的設計稿懸浮在前端還原的頁面當中進行對比，這樣就能快速知道自己的設計頁面有何問題。

因此我們需要將設計稿進行一次性導出成 PNG 文件。這樣可以批量導入到插件當中，直接切換設計稿提高走查效率。

如何使用

打開前端實現好的頁面，使用你剛剛安裝好的瀏覽器插件“Copixel”，添加 UI 設計圖。

通過調整設計圖位置、大小和透明度使其與開發頁面高度重合，配合有截圖標注功能的軟件(比如：Xinp)進行找茬標記。使用走查文檔標記存在問題的地方并說明問題，這樣就能高效完成項目走查。

然后將有問題的走查內容直接分享給開發即可。

CSS Peeper

https://csspeeper.com/

這是一個設計走查 / 樣式復制 / 資源下載的效率神器，它能夠輕松查看網頁端當中所有元素的 CSS 屬性，并且不需要像 Chrome 瀏覽器那樣 “右鍵” – “檢查” 瀏覽器元素，然后在許許多多的代碼當中尋找你需要的 CSS 代碼。我們只需要點擊插件，選擇元素就能夠快速檢查樣式。

場景一：設計走查

比如當前端工程師完成頁面過后，需要設計師進行一個頁面的走查，這個時候很多同學往往就會靠著自己的像素眼進行一一的比對，如果稍微有點經驗的 B 端設計師會打開瀏覽器自帶的檢查，進行元素的核對

然而瀏覽器自帶的檢查其實更多是面向程序員進行設計的，對于我們設計師而言，能夠看懂的卻只有一小部分內容，顯然檢查的效率并不會太高效

這時候使用 CSS Peeper，就可以輕松對網頁當中的 CSS 樣式進行檢查，我們不僅可以看到元素的常規屬性，比如顏色、背景、間距;還可以看到元素的盒子模型，可以看到元素的 Padding、Margin…

通過這個插件，就能清晰的看見開發究竟是在哪一部分還原出現問題，并且能夠很“欠揍”的在他面前秀一下～

場景二：樣式復制

對于設計師來說，就不用再去糾結競品究竟是如何設計?如何還原出來，因為任何網頁上的元素，你都可以通過這個插件，去查看他的還原思路，并且知道它的設計樣式以及屬性

同時可以點擊顏色或者圖片，將該頁面用到的所有顏色或者圖片總結出來進行匯總，可以導出，方便在設計風格上進行分析

場景三：資源下載

使用 CSS Peeper 能夠快速查看在該頁面當中，所用到哪些圖標、圖片。并且可以將這些資源快速下載到本地進行保存。這樣你就可以成為資源小能手

這也就是我工作當中最常使用的插件，你最常使用什么插件?一起來分享聊聊!!