金沙js333娱乐场选择Fiddler搭建手提式有线话机调节和测试境遇(笔者做得项目是调理微信的万众号)

用手机访问本地环境的利器ngrok

2015/08/11 · HTML5 · 4
评论 ·
ngrok

原文出处: 吕大豹   

我们在调试移动端页面,尤其是调试微信页面的时候,会遇到这样的情况,手机连着公司的wifi,开发环境(台式机)插着公司的网线,我们要用手机来访问开发环境下的页面。这个时候,如果网线和wifi是在同一个网段,那么直接在手机访问电脑的ip就可以访问到我们搭在本地的web服务。但是,很多时候,公司的网络并不是这么架设的,wifi和网线不在一个网段,那么,通过上述方法就无法访问到了。

有时候调试必须在手机上进行,在chrome下的模拟无法满足。这时候怎么办呢?之前我采取的是这样的办法,电脑上插一个360wifi(插USB孔的那种),然后共享出热点,手机连接到这个热点上网,就可以访问到开发环境了。如果需要查看http请求,在电脑上打开fiddler,设置一个代理,然后在手机上设置wifi的代理为fiddler,(端口默认是8888)。这样来自手机的请求就会被fiddler捕获到,你就能使用fiddler的强大功能来调试代码了。

上面这个办法挺方便的,但是需要一个小小的硬件,360wifi。你可以买一个,非常便宜,百度也有相同的产品。那如果我们手边没有这个硬件可怎么办呢?接下来该主角出场了,那就是ngrok。

ngrok是个什么玩意呢?其实它就是一个反向代理,我们机器上运行起这个服务后,它可以把本地的一个端口代理到公网。代理到公网是什么概念?公网啊,那就是大家都可以访问到了,没有任何网络限制。当然,我们的测试机,连接到任何网络下的手机也是可以的了。

然而不幸的时,ngrok架设在美国,已经被我们伟大的祖国给墙掉了。但是!一位良心网友在国内架设了一台服务器,我们可以任意使用,鼓掌!

废话说了这么多,我们来看看ngrok到底怎么使用呢?其实是相当简单的。

一、下载相关文件

首先,从这位仁兄架设的网站上(

二、运行服务

下载后的两个文件,我们随便找一个目录放好就行,例如,我放在D盘,这样就行了:
金沙js333娱乐场 1

然后,打开cmd终端,输入如下命令来启动服务: ngrok -config ngrok.cfg -subdomain lvdabao 80

用-config参数来指定配置文件,-subdomain指定访问的子域名称和本地的端口,出现以下界面,说明启动成功了:

金沙js333娱乐场 2

注意一点,这个子域名称是可以随意起的,但不能与别人的重名,因为这个名称是你的代理的唯一标识,之后用

三、进入调试界面

把服务启动起来还不够,我们的最终目的是要调试呀,我们得能捕获到http请求才行。要实现这个也相当简单,因为ngrok已经为你准备好了。真是相当贴心啊~

请看上面服务运行起来后的信息,有一项 Web Interface 127.0.0.1:4040 ,我们直接访问它就可以进行调试了,在你本地浏览器输入这个地址,试试看吧。

金沙js333娱乐场 3

很炫酷有没有,你可以看到http请求头和返回的内容,你需要的都有了。

而且,还有一个更好用的功能,看到那个Replay按钮了吗,点击它可以手动再发起一次你选中的请求,简直不能更赞,这样我们调试某个数据接口时,也省了老去手机上刷新页面了,尤其是调试微信页面,不必每次都去刷该死的二维码了。

这个利器的基本用法就介绍到这里,能满足我们开头提出的需求了。其实它还有更强大的功能,有兴趣的可以FQ去官网查看文档。最后再次为国内的这位仁兄点赞,大家也可以去他搭建的网站上面查看相关资料:

2 赞 5 收藏 4
评论

金沙js333娱乐场 4

部分内容参考:

部分内容参考:

我们在测试微信企业号的时候,由于微信的限制,不能把它拿到chrome浏览器中进行调试,所以就不能实时的看到页面变化情况,因而我们就需要一个能够随时查看我们页面变化的工具。虽然使用Fiddler也是存在一些问题,还是不能直接在我们的浏览器里面调试,但是相比较于将修改后的页面上传到服务器,然后在用手机进行请求,简单了很多。

我们在测试微信企业号的时候,由于微信的限制,不能把它拿到chrome浏览器中进行调试,所以就不能实时的看到页面变化情况,因而我们就需要一个能够随时查看我们页面变化的工具。虽然使用Fiddler也是存在一些问题,还是不能直接在我们的浏览器里面调试,但是相比较于将修改后的页面上传到服务器,然后在用手机进行请求,简单了很多。

1.首先我们需要安装一个fiddler,汉化不汉化的都可以,我给大家提供一个没有汉化的。链接:
密码:kjjg
,直接一溜确定,安装就行。安装完毕以后,我们进行以下设置。Fiddler代理默认使用端口8888,我们在手机端设置http代理为Fiddler的代理服务器(一会下面有具体的步骤),使得手机应用的请求都通过Fiddler来转发,从而实现查看手机端页面请求的功能。

1.首先我们需要安装一个fiddler,汉化不汉化的都可以,我给大家提供一个没有汉化的。链接:
密码:kjjg
,直接一溜确定,安装就行。安装完毕以后,我们进行以下设置。Fiddler代理默认使用端口8888,我们在手机端设置http代理为Fiddler的代理服务器(一会下面有具体的步骤),使得手机应用的请求都通过Fiddler来转发,从而实现查看手机端页面请求的功能。

           1)设置Fiddler的options。

           1)设置Fiddler的options。

                         
打开Fiddler->Tools->Fiddler Options在Connection面板里将“Allow
remote computers to
connect”勾选起来,确定后,关闭Fiddler并重新打开Fiddler。

                         
打开Fiddler->Tools->Fiddler Options在Connection面板里将“Allow
remote computers to
connect”勾选起来,确定后,关闭Fiddler并重新打开Fiddler。

金沙js333娱乐场 5

金沙js333娱乐场 5

       
 2)此时,为了确保代理是正常工作的,我们可以在cmd里执行netstat -anop tcp查看Fiddler进程是否正常监听8888端口,如果服务没有正常开启,可以尝试使用其他端口,端口修改的位置(可以在上一步里面直接修改)。

       
 2)此时,为了确保代理是正常工作的,我们可以在cmd里执行netstat -anop tcp查看Fiddler进程是否正常监听8888端口,如果服务没有正常开启,可以尝试使用其他端口,端口修改的位置(可以在上一步里面直接修改)。

我们先打开任务管理器查看以下我们Fiddler的PID代码是多少。打开任务管理器的快捷键是Ctrl+shift+ESC,正常状态下如图所示,我们的Fiddler.exe的PID是3156,如果你的这个界面里面没有PID这一项,接着往下看。

我们先打开任务管理器查看以下我们Fiddler的PID代码是多少。打开任务管理器的快捷键是Ctrl+shift+ESC,正常状态下如图所示,我们的Fiddler.exe的PID是3156,如果你的这个界面里面没有PID这一项,接着往下看。

 金沙js333娱乐场 7

 金沙js333娱乐场 7

 

 

在任务管理页面,选择查看–选择列,把PID那一栏打上对号,如图所示,这样在任务管理界面就有PID了。

在任务管理页面,选择查看–选择列,把PID那一栏打上对号,如图所示,这样在任务管理界面就有PID了。

金沙js333娱乐场 9

金沙js333娱乐场 9

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注