前端开发神器之ngrok

2024-06-02 19:13:36

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下载地址：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相关推荐

前端开发利器之VSCode
前言小伙伴们大家好,本次和大家聊聊前端开发者最常使用的编辑器--VSCode.阅读本文,前端萌新可以快速上手此工具,前端老手则可以重新审视有无细节遗漏之处. 一.简介 VSCode 是一款免费开源的 ...
前端接口神器之 json server 使用详解
目录一:简介二:在线文档及环境依赖三:操作步骤 3.1.安装json-server 3.2.创建db.json 3.3.浏览器访问四:其他注意事项一:简介 json-server是一款小巧的 ...
开发神器之phpstorm破解与日常使用
PhpStorm 是 JetBrains 公司开发的一款商业的 PHP 集成开发工具,旨在提高用户效率,可深刻理解用户的编码,提供智能代码补全,快速导航以及即时错误检查. PhpStorm可随时帮助用 ...
[转]前端开发必备神级资源(转载请删除括号里的内容)
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/weixin_43606158/arti ...
前端开发必备神级资源
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/weixin_43606158/arti ...
国外前端开发大神经验：目标越明确，计划就越专业，切记，不要撒网！
你想成为一名Web开发人员,但现在你面前有这样一个问题,那就是你没有在高科技行业工作的经验.你上了一些课程,也花了时间在个人编码项目上,但是你的简历上关于"经验"的部分仍然不为企业 ...
前端切换视图_前端开发的10个软件工具，用过3个就是大神！
即刻关注公众号,发现世界的美好经常有小伙伴问我前端开发写代码用那个软件好? 今天在这里统一回答,主流的前端开发写代码软件有这:Webstorm.Vscode.Sublime Text.HBuilde ...
了解WEB前端开发吗，风风雨雨30年，前端开发变迁史
按1990年,第一个Web浏览器诞生,而WWW的诞生直接拉开前端史的序幕. 从静态页面到JavaScript,从依赖后端到自主开发,前端开发者从不被重视的"页面仔"逆袭为如今很多前 ...
前端开发的 20 年变迁史～
点击上方"IT平头哥联盟",选择"置顶或者星标" 作者:司徒正美 1990 年,第一个Web浏览器的诞生:1991 年,WWW诞生,这标志着前端技术的开始. 在 ...

最新文章

热门文章