身為一名前端開發人員，雖然主要工作是支援桌面系統可以正常運行，但同時間也要兼顧行動裝置的支援。chrome的開發工具可以幫助開發者模擬手機或平板的使用狀況。但是模擬終究是模擬，若是沒有實際拿手機或平板來使用一下，總會有點疙瘩，不敢保證使用一定正常。

如果要讓行動裝置連上目前正在開發中的內容，有兩種辦法

兩種都是可行的辦法，但是第一種辦法有很明顯的缺點:

不一定有測試機的部屬權限
就算有權限，部屬需要時間，如果發現問題，修改之後還要再部屬，會耗費很多時間在等在部屬
如果使用第二種辦法，就可以避免掉這兩個問題。第一，不會有權限的問題；第二，發現問題即時修改可以即時反應，不必等待。
唯一的問題是:如何讓外部的網路連接到本機的localhost?
在這裡推薦一個很方便的工具:ngrok

ngrok下載方法

到官網下載
解壓縮之後，點擊應用程式就可以直接使用了

ngrok使用方法

例如現在有一個port 4200的頁面要測試

ngrok的指令為:

ngrok http <你的port> -host-header="localhost:<你的port>"

所以如果現在要使用4200的port，輸入:

ngrok http 4200 -host-header="localhost:4200"

ngrok就會建立一個網址，使用這個網址就會幫我們導向本機的4200

打開手機使用這個網址測試，使用4G行動網路順利連接到本機的內容

不過由於這個是免費方案，所以這個網址是隨機分配的，只要把ngrok的程式關掉之後，這個網址就會失效了。
如果要固定網址的話，就必須使用付費方案。

以上的做法只是以一個前端開發者想要用其他裝置連接到本機的應用來撰寫，ngrok還有更多廣泛的應用，例如讓外部網路連進本機測試資料庫、API等等。這就不是前端的守備範圍，所以更詳細的用途可以參考Alan大大的教學文章: