前端开发神器之ngrok

郭奕
• 阅读 4855

ngrok能做什么,为什么是前端开发神器?

内网穿透,映射本地开发环境到公网,模拟多终端线上环境。

结合一个很简单的PWA demo,举个简单的例子

1.克隆demo到本地

git clone https://github.com/minimal-xyz/minimal-pwa.git

前端开发神器之ngrok

2.本地8080端口运行demo

cnpm i http-server -g
http-server -c-1
chrome http://localhost:8080

前端开发神器之ngrok

3.ngrok内网穿透到公网

ngrok http 8080

4.查看公网地址

chrome http://127.0.0.1:4040/inspect/http

前端开发神器之ngrok

5.公网多终端访问

①使用另外一台或本机desktop

chrome http://733a1ad2.ngrok.io

前端开发神器之ngrok

②使用android,safari mobile,ff mobile等mobile phones
地址栏手动输入http://733a1ad2.ngrok.io

前端开发神器之ngrok

优点:

1.一条url甩产品脸上
2.内网穿透多终端测试
3.监控请求和响应

缺点:

1.响应时间较长
2.安全性不保证

tips:

1.ngrok下载地址:https://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,学习链接附上:https://zhuanlan.zhihu.com/p/...,他们家的各种教程不能太好,无论前端还是nodejs,真心不错,以后外卖我只吃饿了么。
  无意中发现ngrok这个神器,一开始以为这家伙只能做内网穿透,后来发现既然公网地址提供出来了,手机上也可以访问啊,一下子有些兴奋,因为第一家实习时学到的移动端前端测试,需要手动配置本地localhost开发环境,而且需要连接到360免费wifi,较为麻烦。
  其实ngrok还有很多其他的功能,有兴趣的同学可以到https://ngrok.com/product查看

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

期待和大家交流,共同进步,欢迎大家加入我创建的与前端开发密切相关的技术讨论小组:

前端开发神器之ngrok

努力成为优秀前端工程师!

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
6个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Wesley13 Wesley13
3年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
Jacquelyn38 Jacquelyn38
4年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Stella981 Stella981
3年前
Eclipse插件开发_学习_00_资源帖
一、官方资料 1.eclipseapi(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fhelp.eclipse.org%2Fmars%2Findex.jsp%3Ftopic%3D%252Forg.eclipse.platform.doc.isv%252Fguide%2
Stella981 Stella981
3年前
7200 Star!开源免费的内网穿透工具
【导语】:inlets是一个基于WebSocket隧道实现的内网穿透工具,可以将本地服务暴露到公网。简介inlets利用反向代理和Websocket隧道,将内部或开发中的服务通过出口节点暴露到公网。出口节点可以是一个VPS,也可以是任何带有公网IPv4的电脑。类似的工具还有Ngrok、ArgoTunnel等,但这两者都是闭源的,有其本身
Stella981 Stella981
3年前
Linux 搭建 ngrok 反向代理
1. 为什么要使用ngrok?ngrok是一个反向代理(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fbaike.baidu.com%2Fsubview%2F1165595%2F1165595.htm),通过在公共的端点和本地运行的Web服务
为什么mysql不推荐使用雪花ID作为主键
作者:毛辰飞背景在mysql中设计表的时候,mysql官方推荐不要使用uuid或者不连续不重复的雪花id(long形且唯一),而是推荐连续自增的主键id,官方的推荐是auto_increment,那么为什么不建议采用uuid,使用uuid究
Python进阶者 Python进阶者
1年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这