聯成電腦網頁設計教學：推薦給前端設計的10個Chrome外掛
文、菜鳥編
身為設計人員，最需要的就是靈感。當然，能夠天天有如泉源般地湧出，那當然是再好不過。當沒有靈感時，我們就會去參考相關的設計資源。除了視覺呈現外，也會了解對方語法、結構、字型等資訊。今天小編就來推薦大家10個在Chrome上好用的前端設計外掛。
NO.1. PageRuler
外掛連結：http://bit.ly/2FF4Ewg
外掛說明：可自動或手動抓取出區塊的尺寸，定位，及對應的上一層或下一層區塊。
操作方式：
點擊外掛圖示後，預設是手動選取，若想要自動抓取，只要開啟外掛最前方的標籤圖示「<>」，如下圖。
NO.2. Grid Ruler
外掛連結：http://bit.ly/2FI2QlZ
外掛說明：可把它想成Photoshop中的尺標，主要進行對位使用。
操作方式：
點擊外掛圖示後，會在網頁上方及左方出現尺標，操作方式與Photoshop相同，將滑鼠移至尺標位置後，使用拖曳方式至要定位的位置，畫面就會出現定位線，方便查看區塊是否有對齊。
NO.3. Dimensions
外掛連結：http://bit.ly/2FHktCw
外掛說明：抓取區塊間的間距。
操作方式：
點擊外掛圖示後，將滑鼠移動到區塊中的的間格，就可以馬上獲得magrin的設定值。
NO.4. LiveReload
外掛連結：http://bit.ly/2FGq1gO
外掛說明：在網頁編輯時，可在瀏覽器上即時預覽，不須重整網頁。
操作方式：
小編在「編輯網頁可即時預覽畫面-Sublime篇(一)」文中有提到，可前往了解。
NO.5. CSSViewer
外掛連結：http://bit.ly/2FIiyO2
外掛說明：自動抓取元素，並顯示該元素的CSS設定。
操作方式：
點擊外掛圖示後，直接將滑鼠移至元素上，就會出現對應的元素CSS表，透過快速鍵，可以將對應的CSS設定值複製。
NO.6. CSS Peeper
外掛連結：http://bit.ly/2FI5l7V
外掛說明：與CSSViewer相似，差別在於比較偏向圖示化。
操作方式：
點擊外掛圖示後，直接將滑鼠移至元素上，就會出現對應的元素CSS表，但無CSSViewer的快速鍵操作，不過圖示化的表現，可以讓你快速了解CSS設定狀態。
NO.7. CSS3 Generator
外掛連結：http://bit.ly/2FIjpye
外掛說明：可把它當成是CSS特效整合器，透過視覺化操作產生對應編碼。
操作方式：
點擊外掛圖示就可開啟設定視窗，在CSS3 Generator你可以針對Text Shadow、Hex/RGBA、Box Model、Colums、Gradients、Arrows、Transitions、Filters各別設定。
NO.8. Stylebot
外掛連結：http://bit.ly/2FGKYbp
外掛說明：可直接修改網頁CSS樣式，可常駐在瀏覽器，將別人的網頁變成自己的Style。
操作方式：
點擊外掛圖示就可開啟設定視窗，在Stylebot中，可針對Text、Color&Background、Border、layout與Visibility做設定。
NO.9. WhatFont
外掛連結：http://bit.ly/2FHmv5C
外掛說明：可查詢網頁中所使用的字體、大小、行高等資訊。
操作方式：
點擊外掛圖示後，將滑鼠移至文字上，就可看到字體樣式，點即可以查看更細項的字體設定資訊。
NO.10. Emmet Re:view
外掛連結：http://bit.ly/2FFOLFZ
外掛說明：可一次呈現出不同品牌手機與螢幕大小的畫面呈現效果。
操作方式：
點擊外掛圖示後，選擇所需要呈現的手機品牌後，按下Device Wall就可一次呈現出來，畫面也會同步下拉，相當好用。
妥善應用工具，當查看不錯的作品時，就不需開啟開發者模式或是透過網頁原始碼查看。身為前端設計的你，快把外掛收藏起來以備不時之需吧！
