精华内容
下载资源
问答
  • 与其他的抓包工具,例如wireshark、firebug等不同,Fiddler可以允许你在调试CGI接口时,修改返回数据,也就是可以构造请求和模拟响应。此外,Fiddler还可以支持模拟低速网络(如手机网络)...

    使用前端开发利器Fiddler调试手机程序

    Fiddler是一个非常好用的web前端调试工具,它能记录客户端和服务器的http和https所有请求和响应,允许监视、设置断点,修改输入输出数据。与其他的抓包工具,例如wireshark、firebug等不同,Fiddler可以允许你在调试CGI接口时,修改返回的数据,也就是可以构造请求模拟响应

    此外,Fiddler还可以支持模拟低速网络(如手机网络)过滤请求等等,安装了Willow插件以后你还可以轻松实现修改Host等操作。可惜的是目前Fiddler只支持Windows系统,没办法,毕竟是基于.net框架开发的嘛。

    1. Fiddler的安装和配置

    注意:由于Fiddler4是基于.net框架的,所以需要在自己的电脑上先安装.NetFrameWork,安装好了以后,就可以下载Fiddler4进行安装了。

    • 配置:打开将Fiddler,在菜单中选择Tools->Fiddler Options,如下图所示把Fiddler设为全局的监听,再把浏览器或者软件的的http proxy设置为127.0.0.1,端口设为8888。选择ok后,关闭Fiddler并重新打开Fiddler,就可以用Fiddler抓取本地所有的流量了。

    fiddler setup

    2. 抓取手机数据包

    抓取手机数据包和抓去电脑上的数据包一样,只需要将手机的代理设置为Fiddler。

    具体操作:让手机连接的wifi和你安装Fiddler的电脑处于同一网段,然后在手机的wifi设置中,选择高级选项,设置代理,指向你电脑的ip,端口设置为8888即可。

    fiddler Wifi Setup

    如上图所示,我电脑的ip是10.4.66.135,于是在手机连上wifi以后,勾选高级选项代理选择手动代理服务器主机名输入10.4.66.135代理服务器端口输入8888,点击保存即可。

    配置好以后,手机上所有网络请求和响应都会走Fiddler代理,这样就可以分析手机的网络流量了。我们在手机上打开一个大家熟悉的地址www.baidu.com,可以看到抓取的数据流量包了,Fiddler的工具栏看起来很复杂,如下图所示,稍微熟悉一下之后就会发现其实很简单。左侧界面是数据包按照时间顺序的列表,右边是对应每一个包的解析,我们可以看到详细的http header头文件以及表单、json数据等等。

    fiddler baidu

    3. 修改网络响应response

    有的时候我们调试程序的时候,需要服务器返回新格式的数据,或者有时候发现原来的服务器上的某个js/css文件有问题,需要修改。如果这时我们要求同事帮忙修改文件,重新发布的话,将会非常麻烦,也可能会影响到现有的线上环境。对大公司来说,这不仅效率低下,而且一不小心就可能酿成大事故。所以通常的做法是在测试环境进行修改,然后等测试通过以后,再部署到线上环境中去。

    但是有了Fiddler之后,我们可以直接在本地客户端进行调试了。通过Fiddler修改HTTP数据的特性,替换服务器发给我们的回包,等本地客户端调试通过以后再确认发布。说了一堆没用的,我们直接进入实战。

    使用Fiddler修改网络响应包有两种操作:

    • 使用AutoResponder对回包进行重定向
    • 使用Willow插件管理重定向规则

    这两种操作方法是一样的,都是对服务器返回的数据包(下面简称回包)进行规则的设置,使得回包被替换成我们指定的文件。不过Willow插件用起来比较方便,所以我们一般都会安装Willow插件。

    现在我们以Willow插件为例介绍这个非常好用的回包替换功能,我这里安装的是1.4版的Willow,支持Fiddler4.0版本。安装了Willow插件的Fiddler,在右侧的网络数据解析界面上会多出一个Willow标签菜单,如下图所示。

    fiddler willow

    从图上看出,Willow的图标是一个小树,当回包重定向功能开启时,这颗小树会变成绿色,普通状态下小树是灰色的。

    在下面的列表中,FiddlerTemp 1unclenought等都是一个一个的Willow project,这些project对应的是一组一组的规则,这里我们添加一个unclenought的project。在Willow菜单内右键可以选择Add ProjectEdit Project以及Add Rule等等。

    fiddler willow menus

    其中我们最常用就是Add Rule功能了,通过这个我们可以设置一些规则,将回包进行重定向。右键选择Add Rule以后,我们在Match栏填写正则表达式来匹配网络请求,Action栏选择我们本地的一个文件来替换match栏对应的请求的回包,这里我选择了自己写的一个hello fiddler.html测试文件。记住,规则保存好了以后,必须勾选Willow菜单左上角的小勾,使得回包替换功能开启,确保Willow小树的图标变成了绿色的!

    fiddler willow rule

    hello fiddler.html文件的代码如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta charset="utf-8">
    <title>hello fiddler</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
    hello fiddler
    </body>
    </html>

    此时我们在打开手机浏览器输入m.baidu.com以后,不会再看到正常的百度首页,而是本地文件的hello fiddler.html测试页面了。

    hello fiddler

    再回到Fiddler左侧的流量包界面,我们可以看到命中的数据包被标注为黄色了。因此我们判断自己定义的规则是否生效,可以看看数据包是不是被标为黄色了。此外由于,Fiddler回包替换的规则支持正则表达式,所以有时写的规则不一定是完全正确的,大家要多检查下rule中设置规则。

    hello fiddler

    此外Fiddler还支持修改Host的功能,通过Willow插件可以一键修改,方法也是在Willow菜单下,右键点选一个project,选择Add Host,填写需要替换domainip地址即可。关于Fiddler的基本使用就介绍这些,至于断点调试等等,以后有机会再补充!

    展开全文
  • 分享背景最近在开发一款小程序,老是有人说有一个小功能的数据不正确,但是自己测试几个账号都是正确的,无法判断是前端的问题还是后端的问题,为了像开发web应用一样调试,便找到了这个款抓包神器...

    分享背景

    最近在开发一款小程序,老是有人说有一个小功能的数据不正确,但是自己测试几个账号都是正确的,无法判断是前端的问题还是后端的问题,为了像开发web应用一样调试,便找到了这个款抓包神器。其实还是第一次,感觉是蛮神奇的一个东西。

    Charles主要的功能是什么

    说的简单通俗一点,就是通过将我们的调试设备与该软件建立在同一个网络下,该软件能记录下来我们所有的请求和返回信息。如下示例图。

    工具原理

    在未使用该工具时:在使用该工具时:可以看得出,使用了该工具之后,所有的网络请求都得通过该工具,因此我们能够像调试web应用一样调试小程序开发。

    如何使用

    关于该工具的使用,网络上面也已经有很多类似的文章了,就不再重新造轮子了。https://www.jianshu.com/p/12ab7f45818a, 这篇文章就是自己当时使用这工具看到的。

    问题解决

    1.不过在使用中遇到两个坑,就是手机在安装证书的时候,发现输入网址之后,不提示我安装证书,这时候需要用iOS自带的Safari浏览器打开。打开之后会提示安装,接下来就需要在系统设置->通用->描述文件中去点击房产下载的证书进行安装。

    2.https不能抓取内容,显示unknown。这需要在系统设置->通用->关于本机->证书信任设置->开启刚才安装的证书信任。

    相关工具推荐

    Flidder

    Fiddler是位于客户端和服务器端的HTTP代理,也是目前最常用的http抓包工具之一 。它能够记录客户端和服务器之间的所有 HTTP请求,可以针对特定的HTTP请求,分析请求数据、设置断点、调试web应用、修改请求的数据,甚至可以修改服务器返回的数据,功能非常强大,是web调试的利器。学习链接如下:http://blog.csdn.net/ohmygirl/article/details/17846199 http://blog.csdn.net/ohmygirl/article/details/17849983 http://blog.csdn.net/ohmygirl/article/details/17855031

    Hping

    Hping是最受欢迎和免费的抓包工具之一。它允许你修改和发送自定义的ICMP,UDP,TCP和原始IP数据包。此工具由网络管理员用于防火墙和网络的安全审计和测试。

    HPing可用于各种平台,包括Windows,MacOs X,Linux,FreeBSD,NetBSD,OpenBSD和Solaris。下载Hping: http://www.hping.org

    Scapy

    Scapy是另一种不错的交互式数据包处理工具。这个工具是用Python编写的。它可以解码或伪造大量协议的数据包。Scapy是一个值得尝试的工具。您可以执行各种任务,包括扫描,跟踪,探测,单元测试,网络发现。下载Scapy: http://www.secdev.org/projects/scapy/

    Libcrafter

    Libcrafter非常类似于Scapy。这个工具是用C ++编写的,使得更容易创建和解码网络数据包。它可以创建和解码大多数一般协议的数据包,捕获数据包和匹配请求或回复。这个工具可以多线程执行各种任务。下载Libcrafer: https://code.google.com/p/libcrafter/

    Yersinia

    Yersinia是一个强大的网络渗透测试工具,能够对各种网络协议进行渗透测试。如果你正在寻找抓包工具,你可以试试这个工具。下载yersinia: http://www.yersinia.net/

    packETH

    packETH是另一个数据包处理工具。它是一个Linux GUI的以太网工具。它允许你快速创建和发送数据包序列。与此列表中的其他工具一样,它支持各种协议来创建和发送数据包。你还可以设置数据包数量和数据包之间的延迟,还可以在此工具中修改各种数据包内容。

    下载packETH: http://packeth.sourceforge.net/

    Colasoft Packet Builder

    Colasoft Packet Builder也是一个用于创建和编辑网络数据包的免费工具。如果你是网络管理员,你可以使用此工具来测试你的网络。它适用于所有可用版本的Windows操作系统。下载 Colasoft Packet Builder:http://www.colasoft.com/download/products/downloadpacketbuilder.php

    Libtins

    Libtins也是一个很好的工具,用于制作,发送,嗅探和解析网络数据包。这个工具是用C++编写的。C++开发人员可以扩展此工具的功能,使其更强大,更有效地执行其任务。

    下载Libtins: http://libtins.github.io/

    Netcat

    Netcat也是一个流行的工具,可以在TCP或UDP网络中读取和写入数据。它可以创建几乎所有种类的网络连接与端口绑定。这个工具最初被称为Hobbit,并于1995年发布。下载Netcat: http://nc110.sourceforge.net/

    展开全文
  • 抓包工具Charles基本用法

    万次阅读 多人点赞 2017-12-29 17:35:06
    我们在进行B/S架构的Web项目开发时,在前端页面与后台交互的调试的时候,通常使用在JSP中加入“debugger;”断点,然后使用浏览器的F12开发者工具来查看可能出错的地方的数据。或者使用HttpWatch来抓包分析。 在开发...

    我们在进行B/S架构的Web项目开发时,在前端页面与后台交互的调试的时候,通常使用在JSP中加入“debugger;”断点,然后使用浏览器的F12开发者工具来查看可能出错的地方的数据。或者使用HttpWatch来抓包分析。

    在开发移动端项目没有网页的情况下,就不能通过这种方式抓取数据进行分析了。这时可以使用Charles满足以上要求。Charles是一款Http代理服务器和Http监视器,当移动端在无线网连接中按要求设置好代理服务器,使所有对网络的请求都经过Charles客户端来转发时,Charles可以监控这个客户端各个程序所有连接互联网的Http通信。

    一、安装Charles客户端

    打开浏览器访问Charles官网https://www.charlesproxy.com/,下载相应系统的Charles安装包,然后一键安装即可。


    Charles提供两种查看封包的页签,一个是Structure,另一个是Sequence,Structure用来将访问请求按访问的域名分类,Sequence用来将请求按访问的时间排序。任何程序都可以在Charles中的Structure窗口中看到访问的域名。


    二、Charles常用功能

    Charles功能十分强大,这里介绍几个开发中常用的功能。

    1、抓取移动设备发送的Http请求

    先将移动设备连接到Charles客户端。首先在电脑中输入cmd打开命令行窗口,输入ipconfig查看本机连接无线网络的IP地址,这个地址作为移动设备连接Charles客户端的代理地址,移动设备必须要和计算机在同一网络中才能连接上。打开Charles客户端,点击Proxy->Proxy Settings菜单,可以设置移动设备连接到Charles的端口,这样移动设备代理配置需要的ip地址和端口号都有了。Charles是通过将自己设置成代理服务器来完成抓包的,勾选系统代理后,本地系统(如果通过浏览器发送请求)发送出去的请求都能被截取下来。因此,如果想只抓取手机APP发送的请求的话,可以不勾选WindowsProxy选项,这样在测试时就不会被本机Http请求所干扰。

    另外,如果想要抓取浏览器发送的请求包,勾选WindowsProxy选项之后还是抓取失败,可能是浏览器没有设置成使用系统的代理服务器,只要设置成使用系统的代理服务器,或者将浏览器的代理服务器设置成127.0.0.1:8888也可以成功。



    移动设备配置之后,第一次通过手机访问手机中的发送请求时,Charles会弹出提示框,提示有设备尝试连接到Charles,是否允许,如果不允许的话,手机发送请求失败,点击Allow允许,这样这个设备的IP地址就会添加到允许列表中,如果错误点击了Deny可以重启Charles会再此提示,或者通过Proxy->Access Control Settings手动添加地址,如果不想每个设备连接Charles都要点击允许的话,可以添加0.0.0.0/0允许所有设备连接到Charles。



    2、过滤不必要的网络包

    在抓取手机发送的请求时,有许多请求包是对图片等不需要关注的资源的请求,我们只想对指定目录服务器上发送的请求进行抓取,这时候就可以通过过滤网络包的方式实现。有两种实现方式:

    1)选择Proxy->Recording Settings菜单,然后在include栏添加需要抓取包的指定服务器请求协议、地址、端口号,也可以在exclude栏添加不抓取包的地址。



    2)在Sequence界面的Filter栏中填入需要过滤的关键字。


    3、代理转发

    我们在进行本地开发功能的测试时,可以将手机请求的地址转发到本机地址的程序进行执行。右键选择Map Remote,配置请求转发的地址。


    并选择Tools->Map Remote Settings菜单,勾选配置的转发条目。


    也可以右击选择Map Local配置请求映射到本机地址。


    4、抓取Https请求

    Charles默认情况下是抓取不到Https请求的包的,需要进行配置安装证书。选择Help->SSL Proxying->Install Charles Root Certificate,


    点击下一步,


    然后继续下一步直到导入成功,


    选择Help->SSL Proxying->Install Charles Root Certificate on aMobile Device or Remote Browse菜单,


    手机根据提示地址、端口号配置号代理后,浏览器打开http://chls.pro/ssl


    选择允许,


    安装证书,然后配置Proxy->SSL Proxying Settings,添加要抓取的Https请求,


    如果不使用Charles,想要删除手机里面的证书,可以通过手机中的设置->通用->描述文件与设备管理,删除指定的证书即可。

    展开全文
  • 抓包工具原理 Chrome 开发者工具是一套内置在Google Chrome中Web开发和调试工具。使用开发者工具来重演,调试和剖析您网站。 其中常用有Elements(元素面板)、Console(控制台面板)、Sources(源代码面板)、...

    01 Chrome调试

    抓包工具原理

    Chrome 开发者工具是一套内置在Google Chrome中Web开发和调试工具。使用开发者工具来重演,调试和剖析您的网站。

    其中常用的有Elements(元素面板)、Console(控制台面板)、Sources(源代码面板)、Network(网络面板)。

     

    设置断点

    使用断点来暂停JavaScript代码,审查变量的值和在特定时刻所调用的堆栈。

    设置断点的最基本的方法是在特定的代码行上手动添加一个断点。也可以将这些断点配置为仅在满足特定条件时触发。

    例如事件,DOM更改。

     

    在源代码的左侧,您可以看到行号。这个区域称为line number gutter(行号槽)。单击行号槽中的行号,就会在该行代码上添加一个断点。

    监测DOM变化的断点

    DOM断点分为三种:

     

     

    1.Subtree Modifications(子树修改) - 当当前选定节点的子节点被删除,添加或子节点的内容发生更改时触发。当子节点属性改变时,或当前选择的节点发生任何改变,都不会触发该类型的断点。

     

    2.Attributes modifications(属性修改) - 当在当前选定的节点上添加或删除属性时,或当属性值改变时触发。

     

     

    3.Node Removal(节点删除) -当当前选定的节点被删除时触发。

     

    设置方法:在HTML元素上右键单击,然后选择Break on>Subtree Modifications(子树修改)。节点左侧的蓝色图标 DOM断点图标 表示在该节点上设置了DOM断点。

    事件触发断点

    当某事件(例如,click(点击))或事件类别(例如,任何mouse(鼠标)事件)被触发时,使用Sources(源文件)面板上的Event Listener Breakpoints(事件侦听器断点)窗格中断。

     

    逐步调试功能

     

     

    作用域

    当脚本中断的时候,Scope(作用域)窗格将显示当前时刻所有当前定义的属性。

     

     

    调用堆栈

     

     

    靠近边栏顶部的是Call Stack(调用堆栈)窗格。当代码在断点处暂停时,Call Stack(调用堆栈)窗格显示执行路径,按时间逆序,将代码带到该断点。这有助于理解现在执行到哪里,它是如何到达这里的,是调试的一个重要因素。

    转载于:https://www.cnblogs.com/winfun/p/10985597.html

    展开全文
  • 它是基于Node实现的跨平台web调试代理工具,用于前端的移动 H5 http, https 的抓包。 三。功能: 在这个项目中用到的功能有: 查看 HTTP、HTTPS 请求响应内容、 作为 HTTP 代理或反向代理、...
  • 我们在进行B/S架构的Web项目开发时,在前端页面与后台交互的调试的时候,通常使用在JSP中加入“debugger;”断点,然后使用浏览器的F12开发者工具来查看可能出错的地方的数据。或者使用HttpWatch来抓包分析。 在开发...
  • 前端的的技术一直在变化,更新和变革,现在基本是三驾马车(vue,angualr,react)主导整个前端框架,但是无论...学习运用firefox+firebug或许chrom的调试工具,可以运用这些工具调试html、css、js、断点调试、抓包 怎么...
  • http请求抓包 https请求抓包 iPhone手机抓https包 安卓(小米)手机抓https包 三、用本地文件替换线上文件 替换测试环境文件 替换生产环境文件(跨域) 四、其他 筛选指定域下请求 参考文档 @蒋欢...
  • charles介绍 charles是一款PC端的web代理工具,PC上浏览器或者其他应用程序通过charles访问网络,charles会记录所有发送和接收数据。在网络相关开发过程中,前端/客户端需要和服务端联调,联调过程中出现问题...
  • 前端开发人员在开发或者调试 Web 程序时候是需要一些方法来跟踪网页请求,用户可以使用一些网络监视工具比如著名 Fiddler 等抓包调试工具,今天介绍这款工具在接口维护更加方便,支持定义和运行接口测试,...
  • web测试中,如何判断是前端的bug还是后端的bug呢?

    万次阅读 多人点赞 2019-01-23 16:25:28
    通常可以利用抓包工具来进行分析。可以从三个方面进行分析:请求接口,传参,响应。 1.请求接口url是否正确 如果请求的接口url错误,为前端的bug 2.传参是否正确 如果传参不正确,为前端的bug 3.请求接口url和...
  • Fiddler手机抓包

    2020-06-29 10:11:23
    因为手机上无法直接查看网络请求,此时就需要一个抓包工具。fiddler是一个免费的web调试代理,可以用它实现记录、查看和调试手机终端和远程服务器之间http/https通信。 然而,fiddler没有手机端,只能在pc上操作,...
  • 前端需要工具

    2016-05-30 11:40:00
    1.webstorm代码编辑IDE神器。 2.想要便捷轻快编写代码 atom、vs code、sublime ...5.微信web开发者工具,开发微信页面专用可调试 5.charles抓包神器 转载于:https://www.cnblogs.com/c-zhangyan/p/5541864.h...
  • charles抓包配置

    2020-09-05 19:13:20
    ​ charles是一款PC端的web代理工具,PC上浏览器或者其他应用程序通过charles访问网络,charles会记录所有发送和接收数据。在网络相关开发过程中,前端/客户端需要和服务端联调,联调过程中出现问题,比如网络...
  • charles+android抓包

    2019-05-04 07:59:26
    我们在进行B/S架构的Web项目开发时,在前端页面与后台交互的调试的时候,通常使用在JSP中加入“debugger;”断点,然后使用浏览器的F12开发者工具来查看可能出错的地方的数据。或者使用HttpWatch来抓包分析。 在开发...
  • Web学习笔记之:web相关开发工具以及使用心得与技巧写在前面前端代码与调试:Atom专业搜索工具:Archivarius 3000网络抓包工具:Wireshark网页调试工具:postman 写在前面 工欲善其事,必先利其器。好开发和调试...
  • 本文收集了大量抓包工具,近40款,涵盖了各种开发语言(Java,C#,Delphi,C,C++,Objective-C,Node.js,Go,Python)、各类前端(GUI,TUI,CUI,Web UI,Browser Addon),请大家赏析。 Java 1.Burp Suite ...
  • charles介绍 charles是一款PC端的web代理工具,PC上浏览器或者其他应用程序通过charles访问网络,charles会记录所有发送和接收数据。在网络相关开发过程中,前端/客户端需要和服务端联调,联调过程中出现问题...
  • 兴趣:web技术(html+css网页制作)、ps技能、前端自动化工具、前端架构、前端MVVM、MVC、mv*框架和设计模式、各种调试web抓包工具、移动设备web调试工具、浏览器工作原理、前端安全规范和防护。 1. 文件结构:  ...
  • 当你问前端工程师调试页面都用会到什么工具时,他们会告诉你许多好用的调试工具: ...网络抓包工具:HttpWacth、WSockExpert、MiniSniffer等等 HttpWatch可以抓到每个Http请求的全部数据,但无法修改返回的数据;F...
  • Fiddler是一款免费、基于Windows系统代理服务器软件(即Web调试抓包工具),由Eric Lawrence用C#语言在2003年10月发布了第一个版本。注意,由于Fiddler依赖Microsoft .NET Framework 2.0或更高版本,因此在运行...
  • 几年前,在用mybatis做项目调试的时候,就发现,sql拼接非常麻烦,特别是当参数很多,拼sql让人逛。那时候,就在网上找相关的工具,还就找到了一个,布署在web服务器上,通过域名访问。那应该是某个个人开发者...

空空如也

空空如也

1 2 3
收藏数 48
精华内容 19
关键字:

web前端的调试抓包工具