精华内容
下载资源
问答
  • 在以往的开发过程中,我所遇到的问题:公司项目是一个Hybird App,前端H5页面内嵌在APP里,完成开发后,进行联调的时候如果出现错误,很难定位到问题出现在哪里。因为在APP里,我不知道js代码执行到了哪里、看不到...

    写在前面:


    在以往的开发过程中,我所遇到的问题:公司项目是一个Hybird App,前端H5页面内嵌在APP里,完成开发后,进行联调的时候如果出现错误,很难定位到问题出现在哪里。因为在APP里,我不知道js代码执行到了哪里、看不到console.log输出、看不到接口的请求与相应。

    以往联调遇到问题,我解决问题的思路
    (1)首先我会分析是接口问题,还是前端js代码的问题(有时候是真的不知道错在哪了);
    (2)如果是接口问题,就去找后台或者测试去查报文、日志,看看问题出现在哪里(但是别人也有忙的时候);
    (3)如果是js代码问题,自己会分析发生错误的代码大概是在哪一部分,然后会在那些代码里将一些相关的变量写入到页面或者使用弹出框弹出,然后逐一排查(老是改来改去、写入页面、弹出弹窗也很烦人的);
    (4)还有一种方法就是用PC端谷歌浏览器直接打开测试环境H5页面,用控制台来调试(一些与原生APP需要交互的内容无法调试、自己要生成一堆参数去拼接然后模拟登录状态,反正也不是很方便)。
    总之,有时候遇到那种不好定位的问题,解决起来也是要费点功夫的。

    本文的重点来了——spy-debugger:针对上面提出来的那些问题,我抱着试一试的心态在npm官网找了找,然后就看到了spy-debugger,介绍说是一站式页面调试、抓包工具。然后自己立马下载,上手使用,感觉比以往那种方式省事太多了。


    1. 关于spy-debugger

    一站式页面调试、抓包工具。远程调试任何手机浏览器页面,任何手机移动端webview(如:微信,HybridApp等)。支持HTTP/HTTPS,无需USB连接设备。
    spy-debugger详细介绍:https://www.npmjs.com/package/spy-debugger

    2. 安装

    Windows 下(最好是使用管理员权限安装,npm安装包错的话,使用淘宝镜像cnpm安装)

    npm install spy-debugger -g
    

    3. 快速上手

    第一步:手机和PC保持在同一网络下(比如同时连到一个Wi-Fi下);

    第二步:在命令行输入spy-debugger,按命令行提示用浏览器打开相应地址,一般会自动打开浏览器;

    https://img-blog.csdn.net/2018102517491079?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzg1Njg2MQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70

    第三步:设置手机的HTTP代理,代理IP地址设置为PC的IP地址,端口为spy-debugger的启动端口(默认端口:9888);

    Android设置代理步骤:设置 - WLAN - 长按选中网络 - 修改网络 - 高级 - 代理设置 - 手动;

    第四步:手机安装证书。注:手机必须先设置完代理后,再通过(非微信)手机浏览器扫码访问安装证书(手机首次调试需要安装证书,已安装了证书的手机无需重复安装);

    (1) 扫码安装证书的网址:https://github.com/wuchangming/spy-debugger/blob/HEAD/demo/img/QRCodeForCert.png

    (2) 如果该链接无法正常安装,可以去 spy-debugger详细介绍:https://www.npmjs.com/package/spy-debugger里找安装证书的地址。

    (3) 一定是设置完代理后,再去扫码安装。我是设置完代理后关掉了无线,使用流量去扫码安装,会进入到别的无关页面,无法进行安装;

    (4) 安装完之后会有弹窗让你为该证书命名,随便写一个就行,有的手机还会弹出是否信任该证书,要选择信任,否则不能正常使用。

    第五步:用手机浏览器访问你要调试的页面即可(或者说打开APP里你的H5页面就可以了)。

    4. 界面介绍

    页面调试:根据自身需求使用
    https://img-blog.csdn.net/20181025180122434?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzg1Njg2MQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
    请求抓包:根据自身需求使用
    https://img-blog.csdn.net/20181025181334489?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzg1Njg2MQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70

    5. 继续探究

    自定义选项等更多内容,请访问spy-debugger详细介绍:https://www.npmjs.com/package/spy-debugger

    写在最后:

    spy-debugger这个工具上手简单,目前已经能满足我页面调试、抓包一些简单的操作了。这个工具更高大上的用法,或者说一些别的更好用的调试、抓包工具等后期开发过程中有需要了我再上手吧。

    展开全文
  • 前端必会的抓包工具

    千次阅读 2018-04-13 09:03:24
    说到抓包这个问题,很多初级的前端都不太能意识到这个问题,虽然本人也就是个小菜,但是对于抓包工具可以说是熟练掌握了,因为有过太多接口的问题被测试指派了我,那么如果熟练掌握了抓包不仅能快速定位出问题,还能...

    说到抓包这个问题,很多初级的前端都不太能意识到这个问题,虽然本人也就是个小菜,但是对于抓包工具可以说是熟练掌握了,因为有过太多接口的问题被测试指派了我,那么如果熟练掌握了抓包不仅能快速定位出问题,还能分析网络请求,以及一些前端逻辑的问题导致接口多次触发等现象。

    所以一个合格的前端一定要会抓包,而且还要熟练掌握抓包工具,比如可以通过抓包工具些慢速网络,处理慢速网络时的一些交互,更重要的一点是,还可以用抓包工具配置页面的访问跳转,做混合开发时的一些测试页面。

    抓包工具有哪些

    比较熟悉的是Mac上用Charles,Windows上用Fiddler。关于这两者的安装使用教程实在太多了,本文不做赘述,今天我给大家介绍一款集合了抓包和H5页面调试的工具spy-debugger。

    为何开始使用spy-debugger

    在开发过程中,我们的项目都是根据功能需求建一个开发的分支,等到了提测的时候,把分支合并到测试环境,测试通过再上线。基本这是一个统一的流程,但是做移动端混合开发的时,H5页面我们在本地开发的时候,在chrome中开启了移动端模式,基本上到手机上也不会有太大的问题。

    但是上测试环境后,产品有的时候会需要改一些文案样式啊,每次遇到这种情况,临时改些东西都会先在本地的分支上改好,再合并到test分支然后编译上测试。往往很多时候,在浏览器的移动模式下改的东西,上到真机上并不是完全一样,会出现很多适配等问题,所以如果有一款调试工具,既能调试真机的页面,又能调试JS,还能抓包分析那多好。只需要给设备配置好本地的代理,然后我就可以在浏览器上修改真机的代码,还能看在真机上的效果,这样就大大提升了修改的效率,然后我就遇到了spy-debugger这个神器。

    关于spy-debugger

    一站式页面调试、抓包工具。远程调试任何手机浏览器页面,任何手机移动端webview(如:微信,HybridApp等)。支持HTTP/HTTPS,无需USB连接设备。

    特性

    1. 页面调试+抓包
    2. 操作简单,无需USB连接设备
    3. 支持HTTPS。
    4. spy-debugger内部集成了weinre、node-mitmproxy、AnyProxy。
    5. 自动忽略原生App发起的https请求,只拦截webview发起的https请求。对使用了SSL pinning技术的原生App不造成任何影响。
    6. 可以配合其它代理工具一起使用(默认使用AnyProxy) (设置外部代理)

    使用教程及官方文档都很详细

    官方文档链接

    展开全文
  • 前端工具 - Fiddler(抓包

    千次阅读 2019-01-06 22:35:50
    Fiddler简介 ... 2、查看截获的请求的内容。 3、伪造请求(不仅可以伪造服务器返回的请求,还可以...5、解密HTTPs的Web会话。 6、第三方插件,早期版本使用 .net开发,对windows平台支持较好。 工作原理 ...

    Fiddler 简介

    1、监控HTTP/HTTPs流量,浏览器和客户端向服务器发送的HTTP或者HTTPS都会被截取。

    2、查看截获的请求的内容。

    3、伪造请求(不仅可以伪造服务器返回的请求,还可以伪造一个请求发送给服务器)。

    4、测试网站性能。

    5、解密HTTPs的Web会话。

    6、第三方插件,早期版本使用 .net开发,对windows平台支持较好

    工作原理

    fiddler两种代理模式:流模式(streaming) & 缓冲模式(buffering)。

    (1)流模式:fiddler会实时把服务器返回给客户端的数据返回给我们。流模式更接近于浏览器真实的行为。

    (2)缓冲模式:fiddler会等待http请求所有的数据都准备好之后才会返回给应用程序

    使用场景

    工具条功能

    Ps:添加备注(不常用)。

    Ps:回放按钮 Replay,选中某个请求之后直接按R键,可以重新发送该请求。

    Ps:清空监控面板

    Ps:调试Debug。点击之后选择请求发送的时候,有断点;再点击,则选择请求回来的时候有断点。(看图标的箭头方向)

    Ps:流模式、缓冲模式切换按钮。

    Ps:解压请求,帮我们把http请求里面的东西解压出来

    Ps:保持会话的多少,看机器性能。

    Ps:过滤请求:帮我们过滤掉一些不想看到的进程里发出的请求。比如:锁定只接收IE浏览器发出来的请求。

    Ps:查找工具。

    Ps:保存会话:对当前所捕获到的会话做个保存。

    Ps:保存截图

    Ps:计时器:点击开始计时,再点击将计时结果返回

    Ps:快速启动浏览器按钮

    Ps:清除缓存按钮

    Ps:编码/解码。(实用)

    Ps:分离面板:Tearoff。点击弹出浮框,关闭恢复。

    Ps:MSDN搜索(不常用)。

    状态栏功能

    Ps:黑色控制台

    Ps:控制fiddler是否工作,点击一下(不见了),说明fiddler停止工作,再点击下(恢复工作状态)。

    Ps:过滤请求来源,监控哪个地方来的请求

    Ps:记录当前展示的会话数量

    Ps:鼠标指的地方:显示高亮会话的地址。

    监控面板

    监控面板,fiddler的核心功能之一! 注意,右键、左键、双击、拖动等等,说不定会发现新大陆!比如:监控面板的列是可定制的。 保持好奇心,多玩,多点,多看help,一定能发现更多好玩的东东!

    Statistics一个会话的统计信息,可以为优化提供依据。

    (1)RTT:请求往返时间,是衡量请求性能的重要指标。

    (2)Show Chart:数据可视化处理。

    Inspectors对请求进行解包,可以查看相应的请求,响应信息。

    AutoResponder文件代理,可以把请求的资源用本地文件代理掉,方便调试线上bug文件(当网站出现bug时,可以使用AutoResponder来快速定位bug在哪个文件) Composer: 前后端端口连调,可以用来伪造请求--需要后端接口.

    Log记录日志。

    Timeline网站性能分析。

    Host配置

    用Fiddler来配置Host:Tools -> HOST -> 打勾->添加规则->生效->去掉勾,保存,失效。直接关闭FD也行。把所有文件都映射到一台指定的服务器或者一个IP上。

    文件替换(热部署)

    文件映射:拖拽到AutoResponder,(EXACT)精准匹配(也可以用正则表达式进行模糊匹配),进行save后,可以直接将匹配的文件进行加载。 只映射一个文件,也可以替换响应。

    前后端调试

    前后端连调:Composer -> 选择请求方式 GET -> copy 地址 参数-> excuete。Get参数跟在URL后面,参数以 & 连接 POST参数一般要放到RequestBody中

    网络限速

     

    需要基于 fiddler 的插件,点击fiddlerScript 在代码里找到onBeforeRequest

    FiddlerScript -> static function OnBeforeRequest ->

    oSession["request-trickle-delay"]="3000"; // 请求阶段延迟

    osession["response-trickle-delay"] = "3000"; // 请求立刻发出,回应延迟三秒

    Save Script(保存脚本),发送请求~

    Ps:这里是同一个地方,只需要修改这个”request”->” response”即可。

    插件

    1、JavaScript Formatter 代码格式化插件 Fiddler Add-ons 插件:javaScript formatter -> js文件右击 -> 选择 make javascript pretty -> textview / syntaxview 代码全部高亮显示

    2、traffic differ (对比两个不同的对话): 直接拖进两个不同的请求,会显示完整的对比数据 -> 可以用来对比优化两个网站之间的不同(选中更好的方案)。

    3、第三方插件:Willow -> 快速管理host列表 完全可视化 http代理插件 可视化限速 因为没有开源,可以到http://pan.baidu.com/s/1mgocpBi进行下载体验

    下载地址FiddlerSetup(抓包)_fiddlersetup-Web开发工具类资源-CSDN下载

    展开全文
  • 简介Fiddler 是位于客户端和服务器端的 HTTP 代理目前最常用的 HTTP 抓包工具之一功能非常强大,是 web 调试的利器监控浏览器所有的 HTTP/HTTPS 流量查看、分析请...

    简介

    • Fiddler 是位于客户端和服务器端的 HTTP 代理

    • 目前最常用的 HTTP 抓包工具之一

    • 功能非常强大,是 web 调试的利器

      • 监控浏览器所有的 HTTP/HTTPS 流量

      • 查看、分析请求内容细节

      • 伪造客户端请求和服务器响应

      • 解密 HTTPS 的 web 会话

      • 全局、局部断点功能

      • 第三方插件

    • 使用场景

      • 接口的测试与调试

      • 线上环境调试

      • web 性能分析

    下载

    直接去官网下载 Fiddler Classic 即可:

    原理

    学习一件新事物,最好是知其然亦知其所以然,这样遇到问题心里有底,才不容易慌,下面就介绍下 Fiddler 抓包的原理。

    Fiddler 是位于客户端和服务器端之间的 HTTP 代理。一旦启动 Fiddler,其会自动将代理服务器设置成本机,默认端口为 8888,并设置成系统代理(Act as system proxy on startup)。可以在 Fiddler 通过 'Tools -> Options -> Connections' 查看, 图示如下:


    在 Fiddler 运行的情况下,以 Chrome 浏览器为例,可以在其 '设置 -> 高级 -> 系统 -> 打开您计算机的代理设置 -> 连接 -> 局域网(LAN)设置' 里看到,'代理服务器' 下的 '为 LAN 使用代理服务器' 选项被勾选了(如果没有运行 Fiddler,默认情况下是不会被勾选的),如下图:


    点开 '高级',会发现 '要使用的代理服务器地址' 就是本机 ip,端口为 8888。如下图:


    也就是说浏览器的 HTTP 请求/响应都被代理到了系统的 8888 端口,被 Fiddler 拦截了。

    界面介绍

    下面开始对整个 Fiddler 的界面进行一个庖丁解牛

    工具栏

     主要介绍上图中几个标了号的我认为比较常用的功能:

    1. Replay:重放选中的那条请求,同时按下 shift + R 键,可以输入重复发送请求的次数(这些请求是串行发送的)。可以用来做重放攻击的测试。

    2. 删除会话(sessions)

    3. 继续打了断点的请求:打断点后请求会被拦截在 Fiddler,点击这个 Go 继续发送。打断点的方式是点击界面底部的空格,具体位置如下图所示:

    1. 这个类似瞄准器的工具时用于选择抓取请求的应用:按住不放将鼠标拖放到目标应用即可

    2. 可用于查找某条请求,比如你知道请求参数里的某个字段,可以直接输入进行查找

    3. 编码解码工具,可以进行多种编码的转换,是个人觉得挺好用的一个工具,能够编码的格式包括但不限于 base64、md5 和 URLEncode 等

    4. 可以查看一些诸如本机 ip(包括 IPv4,IPv6) 等信息,就用不着去 cmd 里 输入ipconfig 查看了,如下图:

    会话列表(Session List)

    位于软件界面的左半部的就是会话列表了,抓取到的每条 http 请求都列在这,每一条被称为一个 session,如下图所示:

    每条会话默认包含的信息

    • 请求的状态码(result)

    • 协议(protocol)

    • 主机名(host)

    • URL

    • 请求大小(body,以字节为单位)

    • 缓存信息(caching)

    • 响应类型(content-type)

    • 发出请求的 Windows 进程及进程 ID(process)

    自定义列

    除了以上这些,我们还可以添加自定义列,比如想添加一列请求方法信息:

    1. 点击菜单栏 -> Rules -> Customize Rules 调出 Fiddler ScriptEditor 窗口

    2. 按下 ctrl + f 输入 static function Main() 进行查找

    3. 然后在找到的函数 Main 里添加:

    FiddlerObject.UI.lvSessions.AddBoundColumn("Method",60,getHTTPMethod );
    static function getHTTPMethod(oS: Session){
      if (null != oS.oRequest) return oS.oRequest.headers.HTTPMethod; 
      else return String.Empty;
    }
    复制代码

    图示如下:

     4. 按下 ctrl + s 保存。然后就可以在会话列表里看到多出了名为 Method 的一列,内容为请求方法。

    排序和移动

    1. 点击每一列的列表头,可以反向排序

    2. 按住列表头不放进行拖动,可以改变列表位置

    QuickExec 与状态栏

    位于软件界面底部的那条黑色的是 QuickExec,可用于快速执行输入的一些命令,具体命令可输入 help 跳转到官方的帮助页面查看。图示如下:


    在 QuickExec 下面的就是状态栏,

    1. Capturing:代表目前 Fiddler 的代理功能是开启的,也就是是否进行请求响应的拦截,如果想关闭代理,只需要点击一下 Capturing 图标即可

    2. All Processes:选择抓取的进程,可以只选浏览器进程或是非浏览器进程等

    3. 断点:按一次是请求前断点,也就是请求从浏览器发出到 Fiddler 这停住;再按一次是响应后的断点,也就是响应从服务器发出,到Fiddler 这停住;再按一次就是不打断点

    4. 当前选中的会话 / 总会话数

    5. 附加信息

    辅助标签 + 工具

    位于软件界面右边的这一大块面板,即为辅助标签 + 工具,如下图所示,它拥有 10 个小标签,我们先从 Statistics 讲起,btw,这单词的发音是 [stəˈtɪstɪks],第 3 个字母 a 发 'ə' 的音,而不是 'æ'~

    Statistics(统计)

    这个 tab 里都是些 http 请求的性能数据分析,如 DNS Lookup(DNS 解析时间)、 TCP/IP Connect(TCP/IP 连接时间)等。

    Inspectors(检查器)


    以多种不同的方式查看请求的请求报文和响应报文,比如可以只看头部信息(Headers)、或者是查看请求的原始信息(Raw),再比如请求的参数是 x-www-form-urlencoded 的话,就能在 WebForms 里查看...

    AutoResponder(自动响应器)


    这是一个我认为比较有用的功能了,它可以篡改从服务器返回的数据,达到欺骗浏览器的目的。

    实战案例

    我在做一个后台项目的时候,因为前台还没弄好,数据库都是没有数据的,在获取列表时,请求得到的都是如下图所示的空数组:


    那么在页面上显示的也就是“暂无数据”,这就影响了之后一些删改数据的接口的对接。


    此时,我们就可以通过 AutoResponder ,按照接口文档的返回实例,对返回的数据进行编辑,具体步骤如下:

    1. 勾选上 Enable rules(激活自动响应器) 和 Unmatched requests passthrough(放行所有不匹配的请求)


    2. 在左侧会话列表里选中要修改响应的那条请求,按住鼠标直接拖动到 AutoResponder 的面板里,如下图红框所示:


    3. 选中上图红框里的请求单机鼠标右键,选择 Edit Response...


    4. 进入编辑面板选择 Raw 标签就可以直接进行编辑了,这里我按照接口文档的返回示例,给 items 数组添加了数据,如下图所示:


    这样,浏览器接收到数据,页面就如下图所示有了内容,方便进行之后的操作

    Composer(设计者)

    说完了对响应的篡改,现在介绍的 composer 就是用于对请求的篡改。这个单词的翻译是作曲家,按照我们的想法去修改一个请求,宛如作曲家谱一首乐曲一般。


    用法与 AutoResponder 类似,也是可以从会话列表里直接拖拽一个请求到上图红框中,然后对请求的内容进行修改即可。应用场景之一就是可以绕过一些前端用 js 写的限制与验证,直接发送请求,通过返回的数据可以判断后端是否有做相关限制,测试系统的健壮性。

    Filters(过滤器)

    在默认情况下,Filters 会抓取一切能够抓取到的请求,统统列在左侧的会话列表里,如果我们是有目的对某些接口进行测试,就会觉得请求列表很杂乱,这时可以点开 Filters 标签,勾选 Use Filters,启动过滤工具,如下图:


    接着就可以根据我们需要对左侧列表里展示的所抓取的接口进行过滤,比如根据 Hosts 进行过滤,只显示 Hosts 为 api.juejin.cn 的请求,就可以如下图在 Hosts 那选择 'Show only the following Hosts',然后点击右上角 Actions 里的 'Run Filterset now' 执行过滤。


    过滤的筛选条件还有很多,比如据请求头字段里 URL 是否包含某个单词等,都很简单,一看便知,这里不再一一细说。

    HTTPS 抓包

    默认情况下,Fiddler 没办法显示 HTTPS 的请求,需要进行证书的安装:

    1. 点击 'Tools -> Options...' ,勾选上 'Decrypt HTTPS traffic' (解密HTTPS流量)

    1. 点击 Actions 按钮,点击 'Reset All Certicicates' (重置所有证书),之后遇到弹出的窗口,就一直点击 '确定' 或 'yes' 就行了。

    1. 查看证书是否安装成功:点击 'Open Windows Certificate Manager' 打开 Windows 证书管理器窗口


    点击 '操作' 选择 '查找证书',在 '包含' 输入框输入 fiddler 进行查找


    查找结果类似下图即安装证书成功


    现在会话列表就能成功显示 https 协议的请求了。

    断点应用

    全局断点

    通过 'Rules -> Automatic Breakpoints' 可以给请求打断点,也就是中断请求,断点分为两种:

    1. Before Requests(请求前断点):请求发送给服务器之前进行中断

    2. After Responses(响应后断点):响应返回给客户端之前进行中断


    打上断点之后,选中想要修改传输参数的那一条请求,按 R 进行重发,这条请求就会按要求在请求前或响应后被拦截,我们就可以根据需要进行修改,然后点击工具栏的 'Go',或者点击如下图所示的绿色按钮 'Run to Completion',继续完成请求。


    这样打断点是全局断点,即所有请求都会被拦截,下面介绍局部断点。

    局部断点

    如果只想对某一条请求打断点,则可以在 QuickExec 输入相应的命令执行。

    • 请求前断点

    1. 在 QuickExec 输入 bpu query_adverts 。注意:query_adverts 为请求的 url 的一部分,这样就只有 url 中包含 query_adverts 的请求会被打上断点。

    1. 按下 Enter 键,可以看到红框中显示 query_adverts 已经被 breakpoint 了,而且是 RequestURI

    1. 选中 url 中带 query_adverts 的这条请求,按 R 再次发送,在发给服务器前就会被中断(原谅我又拿掘金的请求做例子~)

    1. 取消断点:在 QuickExec 输入 bpu 按下 Enter 即可

    • 响应后断点

    与请求前断点步骤基本一致,区别在于输入的命令是 bpafter get_today_status 按下 Enter 后在 'Composer' 标签下点击 'Execute' 执行,再次发送该请求则服务器的响应在发送给浏览器之前被截断,注意下红色的图标,跟之前的请求前断点的区别在于一个是向上的箭头,一个是向下的箭头。


    取消拦截则是输入 bpafter 后回车,可以看到状态栏显示 'ResponseURI breakpoint cleared'

    弱网测试

    Fiddler 还可以用于弱网测试,'Rules -> Performance -> 勾选 Simulate Modem Speeds' 即可


    再次刷新网页会感觉回到了拨号上网的年代,可以测试网站在网速很低的情况下的表现。

    修改网速

    网速还可以修改,点击 'FiddlerScript' 标签,在下图绿框中搜索 simulateM,按几下回车找到 if (m_SimulateModem) 这段代码,可以修改上下传输的速度:

    安卓手机抓包

    最后一部分主要内容是关于手机抓包的,我用的是小米手机 9,MIUI 12.5.1 稳定版,安卓版本为 11。

    1. 首先保证安装了 Fiddler 的电脑和手机连的是同一个 wifi

    2. 在 Fiddler 中,点击 'Tools -> Options...' ,在弹出的 Options 窗口选择 Connections 标签,勾选 'Allow remote computers to connect'

    1. 手机打开 '设置 -> WLAN -> 连接的那个 WLAN 的设置' 进入如下图所示的页面

    1. '代理' 选择 '手动','主机名' 填写电脑的主机名,端口则是 Fiddler 默认监听的 8888,然后点击左上角的 '打钩图标' 进行保存

    2. 下载证书:打开手机浏览器,输入 'http://192.168.1.1:8888' (注意:192.168.1.1 要替换成你电脑的 ip 地址),会出现如下页面


    点击红框中链接进行证书的下载

    1. 安装证书:打开 '设置 -> 密码与安全 -> 系统安全 -> 加密与凭据 -> 安装证书(从存储设备安装证书)-> 证书 ' 找到刚刚下载的证书进行安装

    1. 安装完成可以在 '加密与凭据 -> 信任的凭据' 下查看

    1. 现在 Fiddler 就可以抓到手机里 app 发送的请求了

    2. 最后注意:测试完毕需要关闭手机的 WLAN 代理,否则手机就上不了网了~

    One More Thing

    几个常用快捷键

    • 双击某一条请求:打开该请求的 Inspectors 面板

    • ctrl + X:清除请求列表

    • R:选中某一条请求,按 R 键可重新发送该请求

    • shift+delete:删除除了选中那一条之外的请求

    转自:https://juejin.cn/post/6983282278277316615

    1. JavaScript 重温系列(22篇全)

    2. ECMAScript 重温系列(10篇全)

    3. JavaScript设计模式 重温系列(9篇全)

    4. 正则 / 框架 / 算法等 重温系列(16篇全)

    5. Webpack4 入门(上)|| Webpack4 入门(下)

    6. MobX 入门(上) ||  MobX 入门(下)

    7. 120+篇原创系列汇总

    回复“加群”与大佬们一起交流学习~

    点击“阅读原文”查看 120+ 篇原创文章

    展开全文
  • 本章介绍其他几个常见的抓包工具。 5.1 常见的抓包工具 目前常见的HTTP抓包工具如图5-1所示。 图5-1 常见的抓包工具 5.2 浏览器开发者工具 浏览器都自带一个开发者工具,该工具可用来抓包,很受开发人员...
  • 在电脑上 Chrome 自带有网络调试工具,如果在移动设备上,就需要一个专门的抓包工具来抓取移动端的流量,来了解网络请求发送了什么数据,返回了什么数据; 代理:当我们在本地调试线上网站的代码时,由于本地域名 ...
  • Charles —— 一款Web调试代理应用程序,适用于Windows / Mac OS / Linux 下载地址: https://www.charlesproxy.com/download/ 下载完成后,根据系统需要勾选proxy菜单下的 • macOS proxy • Windows proxy...
  • 按照软件的功能,我们把抓包工具分为两类: 常规抓包工具:以IRIS、Wireshark为代表,这类软件可以抓取到整个局域网内所有的数据包,主要工作在数据传输层。 专用抓包工具:只抓取某一类协议,通常工作在应用层,最...
  • 抓包工具Charles的学习

    2021-03-19 10:51:15
    我们在进行B/S架构的Web项目开发时,在前端页面与后台交互的调试的时候,通常使用在JSP中加入“debugger;”断点,然后使用浏览器的F12开发者工具来查看可能出错的地方的数据。或者使用HttpWatch来抓包分析。 在开发...
  • 全网最全的抓包工具的综合对比
  • 抓包工具Charles基本用法

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

    千次阅读 2018-08-30 10:00:39
    Charles是目前最强大的http调试工具,在界面和功能上远强于Fiddler 1.1 界面功能 工具条包含了Charles的大部分功能 右键请求出现菜单,Charles的右键菜单功能比fiddler强大太多了 双击请求进入列表...
  • 前端本地开发的场景中,我们需要频繁的改动代码,并需要实时看到效果,并且在一些开发场景中,我们需要将特定的请求代理到特定的IP、本地文件等,所以使用fiddler或whistle等本地、真机抓包调试工具是非常必要的。...
  • 下载Fiddler Everywhere 抓包工具。注册账号或者使用google账号登录,这步略过 想要完成抓包需要下载电脑以及手机两个证书。先下载电脑证书,勾选 捕获 https请求,要不然只能拦截http请求。然后点击 信任根证书。 ...
  • 大家好,我是若川,今天推荐腾讯前端团队的这篇好文。whistle 是一个基于 Node.js 的跨平台网络调试工具。最近随着 Nohost 的开源,有不少同学问了 whistle 相关的问...
  • 我们在进行B/S架构的Web项目开发时,在前端页面与后台交互的调试的时候,通常使用在JSP中加入“debugger;”断点,然后使用浏览器的F12开发者工具来查看可能出错的地方的数据。或者使用HttpWatch来抓包分析。 在开发...
  • 安卓 IOS 抓包工具介绍、下载及配置

    千次阅读 2020-12-22 21:14:00
     在抓包的时候, 配置过程顺利的话, 还行, 但有时候, 搜索了几百遍了教程了, 步骤都对, 但就是抓不到包, 今天来介绍几款手机版的抓包app, 摆脱配置证书, 一键开始抓包 安卓 抓包精灵 功能介绍 一款通过VPN抓取和...
  • 常见的4种抓包工具的对比简述

    千次阅读 2019-07-02 09:11:00
    4种抓包工具的对比 一、httpwatch: 1.httpwatch与IE和firefox浏览器集成,但不支持chrome;httpwatch界面清晰直观,发送请求后可以快速简单的查看Cookies, Headers, Query Strings and POST data,能够通过页面...
  • 基于测试维度,使用抓包工具的作用 基于测试维度,对谷歌浏览器开发这工具F12原理及使用的讲解 Fiddler常见操作讲解 测试使用开发者工具、抓包工具的目的 查看隐藏字段。 了解协议内容,以便展开接口测试和性能...
  • Wireshark抓包工具使用

    千次阅读 2019-08-20 19:01:18
    相对于火狐或谷歌浏览器中使用调试工具抓取HTTP数据包,使用wireshark要显得复杂些,但是也可以达到最终效果。这些操作分为两步,第一步设置合理的过滤条件,第二步在任意数据包中选择Follow TCP Stream。 假设在8....
  • 抓包工具Fiddler

    2020-08-21 14:36:27
    抓包工具原理图: 本质是在客户端与服务器之间安插一个中间人,所有来往的消息都经过它,它会通过监听固定的端口获取请求和相应的内容。这个中间人就是我们常说的http代理。 为什么要抓包呢? 1、分析定位问题 比如...
  • Fiddler抓包工具使用详解

    千次阅读 2019-11-07 09:12:12
    为什么要先学fiddler? ... 结合抓包工具讲http协议更...fiddler是一个很好的抓包工具,默认是抓http请求的,对于pc上的https请求,会提示网页不安全,这时候需要在浏览器上安装证书。 一、网页不安全 1.用fiddler抓...
  • 使用fiddler来抓包 需要先做一些简单的准备工作: 一台带有无线网卡的PC或者笔记本电脑,然后将电脑和手机连接到同一个Wi-Fi网络中,并且保证二者是在同一个ip网段内的; 在电脑上安装 Fiddler; 打开...
  • 抓包工具Fiddle使用

    2021-01-13 17:38:41
    抓包工具Fiddle设置代理 前言 Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据,Fiddler包含了一个强大的基于事件脚本的子系统...
  • whistle,拼音[wēisǒu])基于 Node 实现的跨平台 web 调试代理工具,类似的工具有 Windows 平台上的 Fiddler,主要用于查看、修改 HTTP、HTTPS、Websocket 的请求、响应,也可以作为 HTTP 代理服务器使用,不同于 ...
  • 在学习爬虫进阶路上少不了用到一些抓包工具,今天就给大家隆重推荐6款爬虫抓包神器。 聊一聊:爬虫抓包原理 爬虫的基本原理就是模拟客户端(可以是浏览器,也有可能是APP)向远程服务器发送 HTTP 请求,我们需要知道...
  • 网络抓包工具Fiddler详解s

    千次阅读 2016-10-08 16:52:29
    Fiddler是一款网络分析工具,功能强大,下边介绍下他里边的工具栏以及他的使用方式。 工具栏介绍: 看下图: 打开以后就是这样一个界面。 然后介绍工具栏的选项: File : 里边包含了几个选项 Capture ...
  • 抓包工具-Fidder抓取web app请求 1.什么是Fiddler,它可以做什么 Fiddler是位于客户端和服务器端的HTTP代理,也是目前最常用的http抓包工具之一。 Fiddler能够记录客户端和服务器之间的所有http请求,可以针对...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,906
精华内容 1,562
关键字:

web前端的调试抓包工具