[day11]開發前！先來推薦好用的chrome extension好了～

[day11]開發前！先來推薦好用的chrome extension好了～

  12/13/2016    King Tzeng

---

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

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

視覺工具類：

APP名稱：
Bootstrap Grid


附上連結：
https://chrome.google.com/webstore/detail/bootstrap-grid/gmoboekiodfcajledjijioecfimliddo?hl=zh-TW

功能說明：
可以在任何網頁上覆蓋Bootstrap的格線系統，並觀察他的變化！
在開發時可以開啟此擴充工具，格線直接覆蓋在頁面上，方便觀看是否

demo(http://i.imgur.com/pCo8BLI.gifv)

APP名稱：

Edge: The Web Ruler

附上連結：
https://chrome.google.com/webstore/detail/edge-the-web-ruler/njlkegdphefeellhaongiopcfgcinikh

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

demo(http://i.imgur.com/QNyiNSO.gifv)

APP名稱：

Window Resizer Beta


附上連結：
https://chrome.google.com/webstore/detail/window-resizer-beta/pnhnbekjlbamfnnemcaolkjchjlidbib

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

[Window Resizer_demo](http://i.imgur.com/JB0OcU9.gifv)


前端開發類：


APP名稱：
HTML5 Outliner


附上連結：
https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo

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

[HTML5 Outliner demo](http://i.imgur.com/swxaNaE.gifv)

APP名稱：
Wappalyzer


附上連結：
https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg?hl=zh-TW

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

[Wappalyzer demo](http://i.imgur.com/LspJQaq.gifv)

APP名稱：
Postman


附上連結：
https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop

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

這些都是我在工作開發時，常常用到的工具～分享給大家～

抱歉因為工作到比較晚，所以先發候補文了，在此鞠躬道歉....~

文後-

BLUE MONDAY.....

-同步連載於"iT邦幫忙"鐵人賽活動系列文章[ 著作權為 Ying-chi Tzeng所有，轉載請告知～]