前端开发神器之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查看。

努力成为优秀的前端开发工程师！