瀏覽器, 電腦不求人

[外掛] CSSPeeper 網頁設計必備外掛!更快速的檢視網頁中的CSS樣式設定

梅干2018/04/18
梅問題-[外掛] CSSPeeper 網頁設計必備外掛!更快速的檢視網頁中的CSS樣式設定
  雖然說Chrome內建的開發人工具,就相當的強大,透過這個開發人工具,立即可知道網站的所有的資訊,包含傳輸狀況、網頁的資源,以及安全性,都可透過開發人工具來作檢測,而梅干也很常使用開發人工具來檢查網頁的CSS樣式,並且透過開發人工具也可立即的俢改設定,即時可看到修改後的結果畫面,當調整的差不多後,就可將修改的參數,複製起來並貼回到css中,雖然說Chrome內建的開發人工具相當的強大,但有時在尋找一些設定時,就得花上不少時間,由其是像當滑鼠,滑入若有設定不同底色時,就相當的難找。
  因此最近梅干發現一隻相當不錯的CSS樣式檢視工具,不但操作簡單,同時可快速的顯示出,網頁各個CSS樣式的設定,甚至就連網頁中所有圖像,也可整併的打包下載,更酷的是,若有設定滑鼠滑入顯示不同顏色時,透過CSSPeeper這套外掛,就能立即的將色彩資訊顯示出來,因此身為網頁設計的你,CSSPeeper這隻外掛千萬別錯過了。
CSSPeeper
外掛名稱:書籤側邊欄
適用平台:Chrome
外掛連結:Chrome商店

Step1
當安裝完畢後,在網址列後方,就會出現「CSSPeeper」,點一下展開後,立即就會顯示網頁中的基本的樣式設定。
梅問題-[外掛] CSSPeeper 網頁設計必備外掛!更快速的檢視網頁中的CSS樣式設定
Step2
當把下方的頁籤,切到水滴圖示時,就會顯示該網頁,所使用到的色碼。
梅問題-[外掛] CSSPeeper 網頁設計必備外掛!更快速的檢視網頁中的CSS樣式設定
Step3
當吸引要查詢的區塊時,以梅干的網站來說,由於滑入會換色,因此這時右手邊就會出現該區塊的色碼,以及區塊的間距設定。
梅問題-[外掛] CSSPeeper 網頁設計必備外掛!更快速的檢視網頁中的CSS樣式設定
Step4
甚至切到相機圖示時,還將頁面中的所有的圖示彙整起來,並且也可整批下載,這對於有時在收集資料,就相當的方便,因此還沒裝的朋友,現在也趕快來安裝囉!
梅問題-[外掛] CSSPeeper 網頁設計必備外掛!更快速的檢視網頁中的CSS樣式設定
梅問題講堂-2018/5/26-WordPress佈景主題設計入門-實體課程