[day13]-假日分享系列之「前端必備小工具」

2019 iT 邦幫忙鐵人賽

DAY 13

Modern Web

穢土轉生之術～重構那些自己寫的Code ～系列第 13 篇

2019鐵人賽

King Tzeng

團隊阿莫斯の推坑教

2018-10-28 23:35:58

3192 瀏覽

分享至

前端必備工具介紹

因為Amos老師在之前有創了一個Line團名為阿摩斯的推坑教，很快的就達到500人滿團
~~（好險我有趕快加進去~~
在裡面各式各樣的問題都可以問，生活啊～技術啊等等～
有興趣的人還有2團可以加入，或是Tommy老師開的賴群也可以加入，想加入的話在底下留言吧～

今天因為在Line團認識了很多前端的朋友，有一位朋友因為剛入前端，想知道我用什麼工具及剛入行要注意什麼事情，所以寫了這一篇文，希望可以幫助大家～

Chrome外掛 - 輔助格線類

Design Grid Overlay
連結：(https://chrome.google.com/webstore/detail/design-grid-overlay/kmaadknbpdklpcommafmcboghdlopmbi )

在2017年的鐵人賽有介紹一款輔助格線外掛-Bootstrap Grid，今天要來介紹另外一款格線外掛-Design Grid Overlay。

這一款的格線外掛多了水平線、格線系統可以調的更細緻，例如版面從Large到Small的尺寸可以設定斷點，還有Columns也可以自由設定要多少欄，還有可以看一鍵看網站的Labels尺寸為多少(這個功能我剛剛才發現XD)。
最近因為在做一個平台版面的斷點都是客製化的，所以常用到這個外掛。

Bootstrap 3 Helper (Resizes, Duplicates, Doc)
連結：(https://chrome.google.com/webstore/detail/bootstrap-3-helper-resize/bnkadmnhdpkpbfmaehgjeijgopkjinbl)

其實他是一款複合式的外掛，可以直接連到官方網站看文件（不過文件是Bootstrap 3的），又可以直接縮放到Bootstrap的斷點，通常我都是使用他視窗縮放的這個功能，加上用手拉視窗的時候他也會偵測到是哪個斷點，顯示在視窗的右上角，好用推薦！

Chrome外掛 - 分析類

WhatRuns
連結：(https://www.whatruns.com/)

WhatRuns主要的功能是可以分辨出當下的頁面用了哪些網頁技術，身為前端開發者知己知彼百戰百勝，看到不錯的頁面想知道別人怎麼做的？用這個外掛就可以知道是用什麼技術和包了什麼東西在裡面，可以參考看看。
先說WhatRuns和wappalyzer是差不多的，我會喜歡一個網站的話，打開這兩個外掛分析一下是用什麼技術做的，因為有可能wappalyzer沒分析到的WhatRuns有，WhatRuns沒有wappalyzer有，交叉比對一下！

Perfmap
連結：(https://chrome.google.com/webstore/detail/perfmap/hgpnhiajcdppfbogcpfdgcceepgkhdmk)

Perfmap是一款可用在網頁優化的外掛，他可以偵測網頁的圖片載入的時間並顯示載入熱度圖，越偏紅色代表載入速度越慢，反之越偏綠色表示載入越快，在製作網站的時候可以自己測測看網站有哪個圖片是需要改進的，做為優化網站的一個測試。

Markdown Viewer
連結：(https://chrome.google.com/webstore/detail/markdown-viewer/ckkdlimhmcjmikdlpkmbgfkaikojcbjk)

這是一款可以即時預覽Markdown格式文件的外掛，影片可看出有裝和沒裝Markdown Viewer的差別。
不知道大家需不需要寫程式相關的文件？
Markdown的目標是實現「易讀易寫」屬於輕量級標記式語言，像github等等的平台都使用Markdown格式來寫程式文件，而這個外掛可以將md顯示不同平台的風格，方便撰寫時閱覽～

應用程式工具類

xScope
連結：(https://xscopeapp.com/)

超強大測量軟體！這是我去上Amos老師的客製化進階 RWD 手機版網頁設計班-假日班時，看到老師在用的測量工具！心之音：果然是師傅啊～連工具都這麼強大！
他量測的範圍不限制在網頁裡，所有東西都可以量測！光是測量點不限制在網頁就很值得下載來用～
不過他是需要付費的軟體，像我因為用太久了就會跳出剩下可用的時間，這些時間已經很夠用了。
xScope還有其他的功能，像是尺規、格線等等，可至官網觀看其餘功能～