在這一次的分享中，我們整理了12個前端工程師最常使用到的 google chrome 擴充功能，有些是幫我們一覽他人網頁的架構，有些是幫助我們掌握網站元素的細節，有些則是讓我們的作品更容易和他人分享與溝通，快點一起來看看吧！
透過 Type Sample 可以快速檢視網頁上所使用的字型和字體大小。
下載連結：https://goo.gl/CB89CT
---
範例網站：http://pala.tw/begin-to-learn-python/
FontFace Ninja 和 Type Sample 使用上很相似，除了可以檢視字體、字型之外，亦可以看到文字的行高、字距；但實際測試的時候，微軟正黑體只會顯示”Regular”。
下載連結：https://goo.gl/UNPrcd
---
範例網站：http://pala.tw/begin-to-learn-python/
在製作網頁的過程中，我們常常會需要掌握某些元素的長度、寬度、位置等細節，透過PageRuler這個擴充功能，可以非常簡單的測量元素區塊的大小。
下載連結：https://goo.gl/RGZvB6
---
範例網站：http://www.hexschool.com/
乍看之下會覺得和剛剛介紹的 PageRuler 很接近，雖然它們兩個都能測量長寬，但使用方式截然不同。
PageRuler 是透過選取的方式，選擇自己想要測量的區塊；而 Dimensions 則是會自動去偵測網頁中元素和元素間的距離，但有時候自動偵測到的並不見得你想直接測量的。
下載連結：https://goo.gl/2vlT3n
---
範例網站：https://theinitium.com/
在開發 RWD 網頁時，最麻煩的地方往往在於要測試不同瀏覽器、不同裝置間顯示的樣子，透過 Re:view 將可以快速的達到這樣的效果。
Re: view 它會在一個網頁上，同時且同步顯示不同裝置上的檢視樣貌，也就是說，只需要滑動一個頁面，全部的頁面都會跟著滑動。
另外，它分成 BreakPoints View 和 Device Wall 兩種檢視模式。在 BreakPoints View 中，它會檢視該網頁具有哪些 BreakPoints 並依此呈現不同視窗大小；透過 Device Wall 則是可以檢視該網頁在不同手機裝置時會顯示的樣貌。
下載連結：https://goo.gl/FOcWkv
---
範例網站：http://www.hexschool.com/
由於 CSS3 中新增了相當多語法，像是文字陰影、邊框弧度、邊框陰影、漸層、動畫等等效果，有時候還需要透過不同的前綴詞來支援不同的瀏覽器，因此，有一個視覺化的 CSS3 語法產生器是非常實用的。
透過 CSS3 Generator ，除了可以直接以視覺化的介面調整想要的樣式外，還幫你把所需要的前綴詞一併加入。
下載連結：https://goo.gl/XAUl4Q
Stylebot 很像是 chrome 開發者工具中 CSS 的視覺化介面版，和 Chrome 開發者工具一樣，可以透過滑鼠點選頁面上的元素，然後透過介面去調整其中的 CSS 屬性；如果你不習慣使用 GUI 介面，想要直接透過 CSS 語法的方式加以編輯該元素，也可以選擇進階模式來達到這樣的效果。
下載連結：https://goo.gl/lMTX3I
---
範例網站：http://www.hexschool.com/
Wappalyzer 當我們看到一個有質感的網站時，身為前端工程師，總是想一探究竟它背後所使用的技術。透過 Wappalyzer 就可以打開背後的黑盒子，從前端看到後端（不就看光光了，我們可以檢視它所使用的伺服器，所使用到的框架、套件，記錄分析網站流量所使用到的工具，一目了然。
下載連結：https://goo.gl/YKjcY
---
範例網站：http://www.thenewslens.com/
有時候為了和其他設計師溝通，我們必須要把整個網站的頁面擷取下來，你過去是怎麼擷取的呢？是東截一塊、西截一塊，最後再拼拼湊湊的拼回原貌嗎？
透過 Awesome Screenshot ，可以非常容易地把整個網站的頁面給擷取下來。
在 Awesome Screenshot 中，支援整站頁面截圖、可視頁面截圖、選擇區域截圖，另外，它也支援在該頁面上進行註解或簡單的編輯，快來試試看吧。
下載連結：https://goo.gl/GEF1no
---
範例網站：https://www.awesomescreenshot.com/
goo.gl URL Shortener 這個外掛雖然只是做到一般縮網址的效果，但是卻異常的輕巧好用，有時候在完成某些頁面後，想要傳給客戶看，這時候可以使用這個縮網址工具，直接複製貼上就可以了。
另外，它背後其實是透過 google short URL 的縮網址功能，所以它也支援可以檢視有多少流量和裝置是來自此縮網址。
下載連結：https://goo.gl/ygGS6
前端工程師常常會需要和後端介接一些資料，而最常使用的資料格式就是 JSON 。這款 JSONView 顧名思義就是當它讀取到網頁是屬於 JSON 資料時，會自動重新格式為易讀的排版樣式，同時附帶有除錯的功能。
下載連結：https://goo.gl/oVzEUV
---
範例網站：http://www.w3schools.com/website/customers_mysql.php
某些功能可能會需要本機伺服器的情況下才能正常顯示，透過 Web Server for Chrome 這款應用，我們只需要將寫好的網站以資料夾的方式拉入這款套件當中就可以建立起本機端的伺服器。
另外，如果將 “Accessible on local network” 和 “Also on Internet” 的按鈕打勾，如此，就可以將這個網址分享給同網路連線的使用者一同檢視這個網頁，在開發和溝通上都變得更方便。
下載連結：https://goo.gl/xl5z9P
本次分享中部分擴充功能參考自 “Chrome 網頁除錯功能大解密” ，若想進一步學習和 google chrome 相關開發者除錯工具，或者對於部分的 chrome 擴充功能在操作上有不太清楚的地方，都推薦可參考此免費課程。
免費課程網站：https://goo.gl/lW6ahy
在這次的分享中，是否仍有些你常常使用卻被我們忽略掉的漏網之魚呢？歡迎你透過留言推薦讓我們知道，我們將繼續擴充這個相簿，讓更多開發者在進行開發的過程中享受開發的便利與樂趣。
如果你喜歡我們的內容，歡迎在相簿中 tag 同樣有興趣的好友們，與他們一起分享，一起討論，一起求進步。
若對於當中的 chrome 擴充功能有不清楚操作的地方，也歡迎留言一同討論喔！
0 意見:
張貼留言