前端開發神器之ngrok

ngrok能作什麼，爲何是前端開發神器？

內網穿透，映射本地開發環境到公網，模擬多終端線上環境。

結合一個很簡單的PWA demo，舉個簡單的例子 ####1.克隆demo到本地 git clone https://github.com/minimal-xyz/minimal-pwa.git

####2.本地8080端口運行demo

cnpm i http-server -g
http-server -c-1
chrome http://localhost:8080
複製代碼

####3.ngrok內網穿透到公網

ngrok http 8080
複製代碼

####4.查看公網地址

chrome http://127.0.0.1:4040/inspect/http
複製代碼

####5.公網多終端訪問 ①使用另一臺或本機desktop

chrome http://733a1ad2.ngrok.io
複製代碼

②使用android，safari mobile，ff mobile等mobile phones 地址欄手動輸入http://733a1ad2.ngrok.io

####優勢： 1.一條url甩產品臉上 2.內網穿透多終端測試 3.監控請求和響應

####缺點： 1.響應時間較長 2.安全性不保證

####tips: 1.ngrok下載地址：ngrok.com/download 2.環境:git，node，cnpm，ngrok，Chrome 3.chrome和ngrok命令需設置環境變量 4.以上命令在終端中運行便可 5.協議選擇https和http都行

題外話：   今天MDN官方宣佈say goodbye to firebug，say hello to pwa and view sources，最後說了不少煽情的話。我只在好久之前用過一次firebug改dom裝逼，因此對這些煽情的話無感，卻是對pwa和view source有了很深的興趣。   因而借這個大好的加班前夜，學了下PWA，學習連接附上：zhuanlan.zhihu.com/p/25459319，他們家的各類教程不能太好，不管前端仍是nodejs，真心不錯，之後外賣我只吃餓了麼。   無心中發現ngrok這個神器，一開始覺得這傢伙只能作內網穿透，後來發現既然公網地址提供出來了，手機上也能夠訪問啊，一會兒有些興奮，由於第一家實習時學到的移動端前端測試，須要手動配置本地localhost開發環境，並且須要鏈接到360免費wifi，較爲麻煩。   其實ngrok還有不少其餘的功能，有興趣的同窗能夠到https://ngrok.com/product查看。

努力成爲優秀的前端開發工程師！