分析数据——Charles,wireshark,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盘,这样就行了:
图片 1

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

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

图片 2

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

三、进入调试界面

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

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

图片 3

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

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

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

2 赞 5 收藏 4
评论

图片 4

图片 5

wrieshark:

 

注意:一旦连接上之后,手机或者电脑操作任何跟网络有关的时候,这里的数据就一直在增加,不用的时候及时关掉就行了,还有就是我用的这个是试用版(好处:不要钱,坏处:每到三十分钟就自动关闭,但是重新打开还可以继续使用,长时间的获取数据的话就需要注意了)。跟fiddler的查看方式是基本类似的,主要看圈出来的三个大模块就好了,然后遇到具体问题具体分析就行了。然后最顶端的小工具不清楚的百度下或自己试试就行了,就不一一介绍了。

 

电脑网络:随便连入一个wifi,然后查看本机地址(终端/cmd:ifconifg/ipconfig)
eg:WiFi:nuanxinli,ip:192.168.191.1

 

然后框出来的东西,左数1,2,3功能分别是:开始,结束,重新开始(给弹窗需不需要保存数据,视情况而定就好了)

 

下面以我看过的http请求为例,主要看框出来的三个地方就可以了,寻找有用数据。以上基本讲解就到这里了。

5.问题:我们设置好了fiddler以后,再访问https协议的网站的时候,可能会出现下面的问题,如图:

如何用Fiddler对Android应用进行抓包:

 

Fiddler中response乱码的解决方案

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

讲真,不喜欢在mac上使用这个软件,我的电脑有无线网卡,但是没有网线根本没有办法用电脑去分享网络,时间关系我就没有再弄了,直接换了Windows电脑,但是教程还是可以看看的。

打开我们的cmd,执行netstat -anop
tcp命令,如下图所示,我们可以看到,PID为3156,正在监听8888端口。那么接下来我们要把手机端的代理设置为Fiddler的代理,代理设置需要一个ip和一个端口,ip就是Fiddler所运行的电脑(安装Fiddler的电脑)的局域网ip地址,端口默认是Fiddler代理的端口8888,请确保手机所在的网段可以访问到电脑所在的网段,同一个局域网里一般没什么问题(电脑用宽带,手机用wifi,一个网就行)。

charles:4.0.2

 

http://wenku.baidu.com/link?u…

           1)设置Fiddler的options。

首先:电脑连上网线,然后安装一个wifi共享的软件(eg:猎豹wifi,自行百度搜索就行)

图片 6

fiddler:

图片 7

图3:显示的图2标签页的子标签页面,就是每个类型的直接显示数据
eg:上图显示的是Raw的具体内容

3.给我们的手机设置代理,访问
192.168.1.12:8888,我用的是三星的s7,直接在链接的wifi上面长按就可以,代理主机名是我们的电脑网络的ip,代理服务器端口是我们fiddler监听的那个,如图所示

wireshark :

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

http://blog.csdn.net/quiet_gi…

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

fiddler:只捕获http请求,但是显示的东西要详细的多。(捕获发送/返回的各个数据)

4.最后,我们需要配置一下我们电脑的hosts文件,路径如下,

Wireshark安装使用及报文分析(图文详解)

 

绿色部分是对底下所有请求的筛选条件,具体格式参考下面网址:

2.查看我们安装fiddler软件的电脑的ip,如图所示,我的电脑ip是192.168.1.12,因为我用的是公司的网络,ip是每天动态获取的,所以如果我们不把ip换成固定的,就得每次使用fiddler的时候自己在手动的修改一下。

4、右键新建,选字符串值 加上HeaderEncoding 然后值输入 GBK

 

我弄这些的时候下载的各个软件的版本:

 

Charles:

图片 8

图4:若显示的内容比较多,可以点击按钮直接在文本文件中查看

 图片 9

1、windows按钮+R

图片 10

图5乱码:(本来想自己截图详述一下的,但是看到了一个教程,就犯懒了直接上网址了,不过网址绝对可靠)

 

捕获类型:

                                               
 图片 11                         
 图片 12

http://jingyan.baidu.com/arti…(
安装使用的基本必备教程)

这样我们就可以调试我们的手极端的页面了。

http://jingyan.baidu.com/arti…

这个问题造成我们不能正常访问一些网站内容,比如百度,阿里等等,这是因为我们的fiddler开启了监听https,在设置里面把对号去掉就行了。在fiddler页面,点击Tools–Telerik
Fiddler Option–HTTPS,把监控https通道(decrypt HTTPS
traffic)的那个对号去掉

win7

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

Charles(IOS常用)

 

Charles ,fiddler 方法一致:

 

其实这个安装不需要看教程了,下载安装包之后运行按照向导走就可以了。

图片 13

图3乱码:

部分内容参考:

图5:返回的有效信息

将我们的电脑ip写入,后面跟的是我们要调试的那个网页的网址。

常用抓包工具有好多,本人就试了三个。

图片 14

wireshark

图片 15

http://blog.csdn.net/tz_gg/ar…

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

http://jingyan.baidu.com/arti…

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

mac下安装教程:

注意:一旦连接上之后,手机或者电脑操作任何跟网络有关的时候,这里的数据就一直在增加,不用的时候及时关掉就行了

Charles:只捕获http及https请求(之前没有配置好,只捕获了http的一点儿数据)

其他乱码问题:然后是我没有遇到的关于乱码的问题,教程也一并贴出来了(我只是百度了“fiddler乱码”就出来了这些的,果然百度还是相当靠谱的)

2、输入regedit +回车+是

最新wireshark抓包教程(感觉这个教程还靠点儿谱)

若请求中乱码,可尝试修改一下信息:

Fiddler工具监听到的数据导出后中文是乱码,如何解决它

wireshark:

安装包:官网下载最新即可或百度都有最新的

mac版本:打开之后设置一下下图这个地方进来之后看下电脑上的网址,终端ifconfig看一下,手机上也看一下,两个地址的前三位是否一致,检查是否处在同一网络。若没有问题点击开始就OK了。第一部分为获取到的各种网络请求,第二部分为各项信息,其实我现在也没看太懂(我只看了http请求的),第三部分为十六进制详细信息。

fiddler(mac没有使用版本,需用Windows系统或连接远程安装使用)

参考教程:

这个比较特殊,不是连接wifi,而是需要设置代理,

异常处理:(以下异常处理不是所有情况都适用的,需酌情尝试)

解决Fiddler查看Post参数中文乱码的问题

安装(可参考本文最后的教程)

3、HKEY_CURRENT_USERSoftwareMicrosoftFiddler2

http://blog.csdn.net/bright78…

http://www.360doc.com/content…

http://www.linuxidc.com/Linux…

Linux下安装教程:

总结:本片文档为以上三个工具的单纯,很单纯的基本安装,基本使用,遇到的基本问题,若有任务需求用到的话,这一篇文档只是开始。
                                                                       
       转自: 

最后:打开软件,找到tools(捕获)菜单,设置里面选择同一网段的玩那条网络,点击开始,操作手机就出来东西了

http://thinktothings.iteye.co…

wireshark:捕获各类请求,但一般也就看http请求就可以了。(只捕获了返回的数据)

http://blog.jobbole.com/74018/

http://www.cocoachina.com/ios…

http://jingyan.baidu.com/arti…

手机:连入电脑一样的wifi(nuanxinli),打开手机WiFi的高级设置,打开使用代理:设置ip为192.168.191.1,端口为8888(一般默认设置)

右数1,2,3,重新加载文件,关闭捕获文件,保存捕获文件。Windows版本:界面基本跟mac一致,但会有细微差别。两个按钮的设置是一个功能,按习惯操作就行。也是需要选择手机跟电脑上的网络处于同一环境下,点击开始就OK了。正式捕获数据页面:顶层按钮功能跟mac一致。

然后:手机只需要连接电脑共享出来的wifi就行了。

图1:显示的是手机锁访问的地址信息

打开以上两个软件正常的话就可以看到好多条信息了

图6:可以点击在文本里面查看

Windows下安装教程参考:

图2:此标签就是在点击图1网址之后要看的内容页标签(上半部:图3、4一般为发送的内容。下半部:图5、6一般为返回的有效信息)

http://blog.csdn.net/dj0379/a…

fiddler:fiddler4

基础需查看页面内容(就是内容需要看什么,都有哪些东西):

抓包工具:

注意:虽然手机设置了代理,但是电脑上的比如说网页打开的话也是好会有好多的请求的,看情况过滤或者是忽略就好。

Charles:

fiddler:注意:一旦连接上之后,手机或者电脑操作任何跟网络有关的时候,这里的数据就一直在增加,不用的时候及时关掉就行了一般来讲只是看数据的话,图1—6就可以了。

【HTTP】Fiddler(一) – Fiddler简介:

wrieshark:2.2.1(mac)/2.2.3(Windows)

http://jingyan.baidu.com/arti…

非要看教程的话,这两个就足够了,

http://blog.csdn.net/ohmygirl…(使用过程中的参考教程)

注明:文中的网址均是百度的参考文章,仅供参考,谢谢。

iOS开发抓包工具之Charles:

网站地图xml地图