B 端設(shè)計(jì)師在工作當(dāng)中一定會(huì)遇到這樣的情況：因?yàn)樯暇€的項(xiàng)目與設(shè)計(jì)稿不符而與前端進(jìn)行爭(zhēng)論、為了知道開(kāi)發(fā)顏色使用是否準(zhǔn)確只有“截圖”，然后在設(shè)計(jì)軟件當(dāng)中“吸色”來(lái)進(jìn)行判斷。

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

Copiexl

這是一款字節(jié)跳動(dòng)出品的高效走查插件，它的原理十分簡(jiǎn)單，首先打開(kāi)需要校驗(yàn)的線上項(xiàng)目;接著上傳你的設(shè)計(jì)稿圖片;然后通過(guò)降低設(shè)計(jì)稿的透明度，達(dá)到項(xiàng)目快速走查的目的。開(kāi)發(fā)哪里有問(wèn)題，一眼便知。簡(jiǎn)單教大家如何安裝使用這樣一款插件：

1. 安裝方法：

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

點(diǎn)擊下載過(guò)后，就會(huì)跳轉(zhuǎn)到 Google 的應(yīng)用商店當(dāng)中，點(diǎn)擊安裝即可，與瀏覽器插件的安裝方式類(lèi)似(這里需要搭梯子)

2. 使用教程

選擇合適的頁(yè)面設(shè)計(jì)尺寸

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

該如何輸出設(shè)計(jì)稿?

Copiexl 瀏覽器插件的原理是將你的設(shè)計(jì)稿懸浮在前端還原的頁(yè)面當(dāng)中進(jìn)行對(duì)比，這樣就能快速知道自己的設(shè)計(jì)頁(yè)面有何問(wèn)題。

因此我們需要將設(shè)計(jì)稿進(jìn)行一次性導(dǎo)出成 PNG 文件。這樣可以批量導(dǎo)入到插件當(dāng)中，直接切換設(shè)計(jì)稿提高走查效率。

如何使用

打開(kāi)前端實(shí)現(xiàn)好的頁(yè)面，使用你剛剛安裝好的瀏覽器插件“Copixel”，添加 UI 設(shè)計(jì)圖。

通過(guò)調(diào)整設(shè)計(jì)圖位置、大小和透明度使其與開(kāi)發(fā)頁(yè)面高度重合，配合有截圖標(biāo)注功能的軟件(比如：Xinp)進(jìn)行找茬標(biāo)記。使用走查文檔標(biāo)記存在問(wèn)題的地方并說(shuō)明問(wèn)題，這樣就能高效完成項(xiàng)目走查。

然后將有問(wèn)題的走查內(nèi)容直接分享給開(kāi)發(fā)即可。

CSS Peeper

https://csspeeper.com/

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

場(chǎng)景一：設(shè)計(jì)走查

比如當(dāng)前端工程師完成頁(yè)面過(guò)后，需要設(shè)計(jì)師進(jìn)行一個(gè)頁(yè)面的走查，這個(gè)時(shí)候很多同學(xué)往往就會(huì)靠著自己的像素眼進(jìn)行一一的比對(duì)，如果稍微有點(diǎn)經(jīng)驗(yàn)的 B 端設(shè)計(jì)師會(huì)打開(kāi)瀏覽器自帶的檢查，進(jìn)行元素的核對(duì)

然而瀏覽器自帶的檢查其實(shí)更多是面向程序員進(jìn)行設(shè)計(jì)的，對(duì)于我們?cè)O(shè)計(jì)師而言，能夠看懂的卻只有一小部分內(nèi)容，顯然檢查的效率并不會(huì)太高效

這時(shí)候使用 CSS Peeper，就可以輕松對(duì)網(wǎng)頁(yè)當(dāng)中的 CSS 樣式進(jìn)行檢查，我們不僅可以看到元素的常規(guī)屬性，比如顏色、背景、間距;還可以看到元素的盒子模型，可以看到元素的 Padding、Margin…

通過(guò)這個(gè)插件，就能清晰的看見(jiàn)開(kāi)發(fā)究竟是在哪一部分還原出現(xiàn)問(wèn)題，并且能夠很“欠揍”的在他面前秀一下～

場(chǎng)景二：樣式復(fù)制

對(duì)于設(shè)計(jì)師來(lái)說(shuō)，就不用再去糾結(jié)競(jìng)品究竟是如何設(shè)計(jì)?如何還原出來(lái)，因?yàn)槿魏尉W(wǎng)頁(yè)上的元素，你都可以通過(guò)這個(gè)插件，去查看他的還原思路，并且知道它的設(shè)計(jì)樣式以及屬性

同時(shí)可以點(diǎn)擊顏色或者圖片，將該頁(yè)面用到的所有顏色或者圖片總結(jié)出來(lái)進(jìn)行匯總，可以導(dǎo)出，方便在設(shè)計(jì)風(fēng)格上進(jìn)行分析

場(chǎng)景三：資源下載

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

這也就是我工作當(dāng)中最常使用的插件，你最常使用什么插件?一起來(lái)分享聊聊!!