視覺化查看網頁樣式及標注- Visual Inspector Chrome擴展

Sponsor

網頁設計師通常會使用Chrome或firefox這兩款瀏覽器，為什么？不僅僅是因為好用，而是為了使用按F12出現的「查看網頁元素」這個Web開發者工具，然而這個工具真的沒代替品嗎？有的，Visual Inspector 這個視覺查看器就相當好用，建議設計師們去試試。

Visual Inspector 是 Chrome 的一個擴展，它可以方便的查看頁面的字體、顏色、盒子模型、及元素間的間距標注等等，全是視覺化展示，這比代碼展示形式的F12工具更易觀看，是網頁設計師必備輔助工具之一。

擴展名稱：Visual Inspector
擴展主頁：https://www.canvasflip.com/visual-inspector/
安裝擴展（VPN）：https://chrome.google.com/webstore/detail/visual-inspector-by-canva/efaejpgmekdkcngpbghnpcmbpbngoclc?hl=en

查看/修改樣式、標注（好用?。?/h3>

點擊「INSPECT」按鈕（第2個）可以實時查看選中元素的盒子模型、樣式以及與其它元素的標注，尤其是查看鄰元素的間距標注功能，這個相當好用。

PS: 除了查看還可以實時修改的哦~

顏色

點擊第3個圖標（水滴icon）可以查看當前網站樣式的所有顏色。

用了這個功能才知道設計達人的網站顏色還是有點多，有時間真的要修理修理啊……

圖像查看與導出

這個就實用了，如果一些網站禁止右鍵復制圖像，那么這功能就可以很方便的將其導出來。我們只需要點擊第4個相機按鈕，就可以想看當前頁面的所有圖片，并可以單獨導出來哦！

雖然我有100種方法我可以扣出網頁的圖片，但這個工具實在太方便了。

值得使用的理由

• 視覺化形式來查看元素的結構樣式，同時也可以修改
• 查看元素間的間距功能（超實用）
• 圖像導出功能，不僅是為了導出圖片，有時還想導出某個圖標……

有了這個，是不是可以不用F12了？非也，F12還有很多強大的功能，只是作為設計師很少用到。所以結合Visual Inspector二者相互使用會更好。

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。