我絕對不會說是因為code寫不完才來轉寫推薦工具的！（被打....

輔助開發工具也是很重要的，可以輔助我們在視覺上或是使用功能上的了解～
今天要來介紹幾個在我的瀏覽器上裝的幾個好用的工具，並講解有什麼作用！

視覺開發類：

APP名稱：

Bootstrap Grid

附上連結：

https://chrome.google.com/webstore/detail/bootstrap-grid/gmoboekiodfcajledjijioecfimliddo?hl=zh-TW

功能說明：

可以在任何網頁上覆蓋Bootstrap的格線系統，並觀察他的變化！
在開發時可以開啟此擴充工具，格線直接覆蓋在頁面上，方便觀看是否正確
自錄DEMO on imgur

APP名稱：

Edge: The Web Ruler

附上連結：

https://chrome.google.com/webstore/detail/edge-the-web-ruler/njlkegdphefeellhaongiopcfgcinikh

功能說明：

就是一把在螢幕上的尺XD，可以拿來量螢幕上元件或是頁面的尺寸也可以任意的移動！
尺的規格直式橫式都有，單位上有三種可以選擇px(像素)、cm（公分）、in（英寸），我拿來應用在量元件離視窗距離多遠等....

APP名稱：

Window Resizer Beta

附上連結：

https://chrome.google.com/webstore/detail/window-resizer-beta/pnhnbekjlbamfnnemcaolkjchjlidbib

功能說明：

可依照你按下的螢幕尺寸來縮放視窗大小，在做響應式(RWD)網頁時好用！
也可記憶你輸入客製化尺寸，一鍵縮放～
當拖曳改變視窗大小，即時在右下角顯示現在的螢幕尺寸大小。

前端開發類：

APP名稱：

HTML5 Outliner

附上連結：

https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo

功能說明：

此擴充功能，可以分析網站的元素大綱，方便助於SEO的優化！
按下後可以看出此網站的標題解析是否有階層式的排列下來，對於在google搜尋的話，如有清楚的標題層級，會相對提升搜尋的排行！

APP名稱：

Wappalyzer

附上連結：

https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg?hl=zh-TW

功能說明：

分析網站運用了什麼程式框架，並可點進連結裡看有什麼網站也是使用此框架，無聊的時候逛逛網頁，發現不錯的網頁可以看一下他是用什麼去寫的、埋了什麼在裡面～！

APP名稱：

Postman

附上連結：

https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop

功能說明：

測試API的好物啊！！可以儲存你常用的Api並分類，還有回傳JSON值可幫你排列整齊，方便閱讀測試！
我開Postman這個app的頻率比上述的都還多很多！好用！

自錄Demo on youtube↓

這些都是我在工作開發時，常常用到的工具～分享給大家～
抱歉因為工作到比較晚，所以先發候補文了，在此鞠躬道歉....但是每一篇文章我都很用心在寫的~

文後-

BLUE MONDAY.....

同步連載於blogger-"King 學習前端之人生"
[ 著作權為 Ying-chi Tzeng所有，轉載請告知～]