当前位置: 首页 > 编程日记 > 正文

前端开发神器之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下载地址: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查看。

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

相关文章:

YC陆奇发起知乎第一问:怎样的环境才能让更多AI创业公司成功?

“在人工智能时代,怎样的创新环境和措施能让更多科技驱动的创业公司成功,使其不再是大型科技公司的专利?” 一周前,知乎发起了“2018 互联网洞见者”提问,先后邀请到鹅厂厂长马化腾、“风投女王”徐新、香港科技大学杨…

Linq to SQL 资源

Scott Guthrie 的 Linq to SQL 系列:1)介绍http://weblogs.asp.net/scottgu/archive/2007/05/19/using-linq-to-sql-part-1.aspx 2)定义数据模型http://weblogs.asp.net/scottgu/archive/2007/05/29/linq-to-sql-part-2-defining-our-data-model-classes.aspx 3)查询…

首发|机器学习未来十年:你需要把握的趋势和热点

CSDN 出品的《2018-2019 中国人工智能产业路线图》V2.0 版即将重磅面世! V1.0 版发布以来,我们有幸得到了诸多读者朋友及行业专家的鼎力支持,在此表示由衷感谢。此次 V2.0 版路线图将进行新一轮大升级,力求为读者呈现更全面的中国…

web前端知识点太多_初学web前端,学习方法容易走偏,这是为什么?

一、了解web前端所谓“知己知彼,百战不殆”,在学习web前端之前,还是让我们先了解一下什么是web前端吧!所有用户终端产品与视觉和交互有关的部分,都属于前端开发的领域。从狭义上讲,Web前端就是用HTML、CSS、…

2017-2018 ACM-ICPC, NEERC, Southern Subregional Contest

A. Automatic Door 对于规律的点可以推公式计算&#xff0c;对于噪点则暴力计算&#xff0c;时间复杂度$O(m\log m)$。 #include<stdio.h> #include<iostream> #include<string.h> #include<string> #include<ctype.h> #include<math.h> #…

正则过滤非法字符

小写英文&#xff1a;大写英文&#xff1a;任意数字&#xff1a;限2位小数&#xff1a; 如: 123.12日  期&#xff1a; 如: 2002-9-29任意中文&#xff1a;部分英文&#xff1a; 范围: a,b,c,d,e部分中文&#xff1a; 范围: 一二三四五六七八九十有关正则表达式 ?.只能输入数…

emoji 乱码_这个自制emoji的网站,让你成为永远不输的斗图王者

作为表情界的元老级人物&#xff0c;不管是苹果官网输入法、微信官方表情还是各个主流输入法里&#xff0c;我们都可以从里面找到大量 emoji 表情。然鹅……就算这么多表情&#xff0c;小帮每次发 emoji 时还有有些选择困难。因为翻遍所有表情&#xff0c;都没法找到合适的啊&a…

[vijos1234]口袋的天空最小生成树

题目链接&#xff1a;https://vijos.org/p/1234 白天刚刚写完prim的算法&#xff0c;晚上就心血来潮的打了一道最小生成树的题 虽然有题解说可以用prim做&#xff0c;但是这道题明显是加最小的边&#xff0c;感觉kruskal方便多了 但是愉快的是我竟然不是一次过&#xff0c;最后…

南开大学提出最新边缘检测与图像分割算法,精度刷新记录(附开源地址)

作者 | 刘云、程明明、胡晓伟、边佳旺等 译者 | 刘畅 整理 | Jane 出品 | AI科技大本营 近日&#xff0c;南开大学媒体计算实验室提出的最新边缘检测和图像过分割&#xff08;可用于生成超像素&#xff09;被 IEEE PAMI 录用。研究的第一作者也发微博称&#xff1a;“这是第…

修改Vista系统目录权限

例如C:\Windows\System32\DriverStore\FileRepository1. 修改目录所有者右键菜单->Properties->Security->Advanced->Owner->Edit->Other users or groups...输入用户名并确定&#xff0c;勾选Replace owner on subcontainers and objects&#xff0c;一路确…

gitlab安装各种坑

架构&#xff1a;源码安装, 数据库用mysql,网站用nginx 坑一.nginx报错 122016/07/19 09:26:11 [crit] 3881#0: *10 connect() to unix:/home/git/gitlab/tmp/sockets/gitlab-workhorse.socket failed (13: Permission denied) while connecting to upstream, client: 192.168.…

当代的设计潮流是什么_解码“潮流合伙人”IP生意经

每经记者&#xff1a;杜蔚 每经编辑&#xff1a;董兴生11月18日&#xff0c;备受期待的《潮流合伙人2》在成都举办了FOURTRY FAMILY PARTY新品发布日活动&#xff0c;节目的品牌主理人陈伟霆&#xff0c;合伙人欧阳娜娜、范丞丞等纷纷亮相现场&#xff0c;吸引众多人前来围观。…

Loonframwork到SWT的移植测试(JAVA GAME TEST SOURCE)

愚以为&#xff0c;用SWT作界面&#xff0c;是一种在用Java写VB的体验。本周心情极度恶劣&#xff0c;一直不想说话&#xff0c;也不想写新代码&#xff0c;郁闷中尝试了一下将Loonframework的代码移植到SWT。&#xff08;其实我觉得AWT,SWT,Swing用那个真的要根据需求决定&…

百度大脑发挥AI“头雁效应” 王海峰:在AI时代共同推动社会智能化升级

11月1日&#xff0c;百度大脑作为2018百度世界大会的第一弹登场。 近期国家层面也高度重视人工智能的发展现状和趋势&#xff0c;认为加快发展新一代人工智能是事关我国能否抓住新一轮科技革命和产业变革机遇的战略问题。人工智能技术具有溢出带动性很强的“头雁”效应。百度高…

bat脚本如何自动输入y_Linux系统如何设置开机自动运行脚本?

大家好&#xff0c;我是良许。 在工作中&#xff0c;我们经常有个需求&#xff0c;那就是在系统启动之后&#xff0c;自动启动某个脚本或服务。在 Windows 下&#xff0c;我们有很多方法可以设置开机启动&#xff0c;但在 Linux 系统下我们需要如何操作呢&#xff1f; Linux 下…

form表单的action提交写到js中来,同时onclick事件也写在js中来。其action也可以通过ajax来提交的。...

假如你现在还在为自己的技术担忧&#xff0c;假如你现在想提升自己的工资&#xff0c;假如你想在职场上获得更多的话语权&#xff0c;假如你想顺利的度过35岁这个魔咒&#xff0c;假如你想体验BAT的工作环境&#xff0c;那么现在请我们一起开启提升技术之旅吧&#xff0c;详情请…

Win32.Lioten.SG病毒

病毒名称&#xff1a;Win32.Lioten.SG 疯狂性&#xff1a;低 破坏性&#xff1a;中 普及度&#xff1a;中 Win32.Lioten.SG病毒描述&#xff1a; Win32.Lioten.SG是一种通过网络共享传播的蠕虫&#xff0c;还会利用Windows漏洞进行传播&#xff0c;并利用IRC控制后门。 Lioten经…

2019秋招AI岗位竞争究竟有多激烈?

机器学习未来十年&#xff1a;你需要把握的趋势和热点一个正经的机器学习项目&#xff1a;关于那些羞羞的不可描述的动作分析【面试现场】如何编程获得最多的年终红包奖&#xff1f;你最关心的马蜂窝事件舆论全景图在这里&#xff0c;用文本挖掘一挖到底影响 5000 万开发者&…

配置Tomcat和在Eclipse中创建Web工程

配置Tomcat服务器信息&#xff1a;在Tomcat的安装目录下有一个conf目录&#xff0c;里面存放着Tomcat服务器的配置文件&#xff0c;其中最为核心的配置文件是server.xml&#xff0c;在这个文件里我们可以配置服务器的各种参数&#xff0c;例如超时时间、连接数量、端口配置等等…

eureka需要替换吗_iOS第三方库Eureka实现定制动画详解(二):万变不离其宗-Row组件...

Eureka的核心就是Row&#xff0c;所以我们得重点聊聊它。Row是什么&#xff1f;其实上面已经说过了&#xff0c;不过这只是干巴巴的概念&#xff0c;下面本猫用一个实际的例子带大家性感&#xff0c;哦&#xff0c;不…是感性的认识一下到底什么是Row 新建一个iOS项目&#xff…

学习这么多算法到底在解决哪些问题?深度学习之外,我们要选择谁?

CSDN 出品的《2018-2019 中国人工智能产业路线图》V2.0 版即将重磅面世&#xff01; V1.0 版发布以来&#xff0c;我们有幸得到了诸多读者朋友及行业专家的鼎力支持&#xff0c;在此表示由衷感谢。此次 V2.0 版路线图将进行新一轮大升级&#xff0c;力求为读者呈现更全面的中国…

JDK6.0+Eclipse3.2+MyEclipse5.0GA+Tomcat5.0+Win2003搭建J2EE开发平台.

呼.........不容易啊.J2EE平台今天终于搭建起来了.... 1.先安装jdk-6-beta2-windows-i586.exe,安装目录:E:\Program Files\Java\jdk1.6.0 2.然后安装jakarta-tomcat-5.0.30服务器.安装目录:E:\Program Files\Java\Tomcat 5.0 3.在"我的电脑"--"属性"--&quo…

Google全球员工围攻Google!

参加 2018 AI开发者大会&#xff0c;请点击 ↑↑↑屋漏偏逢连夜雨&#xff0c;仍未进得了中国的搜索巨人 Google&#xff0c;在自己的地盘上&#xff0c;日子也不好过。自 2005 年收购以来&#xff0c;硅谷科技巨头 Google 在世界上第一大手机操作系统 Android 收益颇丰&#x…

23 版本以上的v4包_Ant Design Pro V2升级到V4 小结

前言前不久接手过一个历史悠久的项(shi)目(shan)&#xff0c;技术栈之复杂(混乱)令我潸然泪下&#xff1a;你甚至可以在一个项目里使用前端三大框架(Angular1, Vue, React)。三份的代码&#xff0c;本应该给我带来更多的快乐&#xff0c;但是为什么会变成这样呢?鉴于接到的是一…

python标准库介绍——23 UserString 模块详解

UserString 模块(2.0 新增) UserString 模块包含两个类, //UserString// 和 //MutableString// . 前者是对标准字符串类型的封装, 后者是一个变种, 允许你修改特定位置的字符(联想下列表就知道了).注意 //MutableString// 并不是效率很好, 许多操作是通过切片和字符串连接实现…

影像融合操作的几种途径

影像融合操作的几种途径 1、在遥感软件中作影像融合 融合必须在全色波段和多光谱波段两者配准好的基础上进行&#xff0c;我建议你用edars融合&#xff0c;这样比较省时。据说PCI最好&#xff0c;机器没有软件没有试验。 在envi中&#xff0c;把全色波段和多光谱波段两个图像…

微信小程序万里目_微信小程序学习用推荐:破音万里:音频播放,音乐列表

[AppleScript]let bsurl https://poche.fm/api/app/playlists var common require(../../../utils/util.js); let seek 0 let defaultdata { winWidth: 0, winHeight: 0, listHeight: 0, // tab切换 currentTab: 0, // 播放列表 playlists: [], tracks: [], coverImgUrl: &…

11月11日截止报名!快来参加顶尖极客汇聚的“AI Challenger 全球AI挑战赛”!

“AI Challenger 全球AI挑战赛”是面向全球人工智能人才的开源数据集和编程竞赛平台&#xff0c;致力于满足AI人才成长对高质量丰富数据集的需求&#xff0c;推动AI在科研与商业领域结合来解决真实世界的问题。AI Challenger以服务、培养AI人才为使命&#xff0c;打造良性可持续…

Asp.net下实现隐藏真实下载地址(可以实现简单的防盗链)

现在随着FlashGet和xunlei等下载工具的日益普及&#xff0c;下载网站的一些下载地址都能直接被捕获到&#xff0c;&#xff0c;但是有些时候为了防盗链或权限限制不想对地址进行暴露&#xff0c;对于Asp.net下的防盗链有很多方法&#xff0c;我这里写了一种&#xff08;51aspx的…

大众点评数据平台架构变迁

2019独角兽企业重金招聘Python工程师标准>>> 最近和其他公司的同学对数据平台的发展题做了一些沟通&#xff0c;发现各自遇到的问题都类似&#xff0c;架构的变迁也有一定的相似性。 以下从数据&架构&应用的角度对2012.07-2014.12期间大众点评数据平台的架构…