CN116340675A - 一种基于调试器的网络请求抓包方法及系统 - Google Patents

Abstract

本发明提供了一种基于调试器的网络请求抓包方法及系统，其中方法包括基于Flutter可视化工具构建目标调试器；目标调试器为一前端配置页面；将目标调试器嵌入目标APP，并设置目标调试器的开关状态；目标APP为利用Flutter网络框架开发的APP；当目标APP运行时，对当前页面的网络请求进行抓包，得到网络请求抓包信息；利用目标调试器对网络请求抓包信息进行显示。通过本发明，简化了使用Flutter跨端网络抓包的问题，利用Flutter可视化工具在APP中嵌入调试器配置，实现通过操作简单即可实时查看APP中的相关请求和响应信息；且调试器无侵入性，不会对现有APP的功能产生影响。

Description

一种基于调试器的网络请求抓包方法及系统

技术领域

本发明涉及移动端测试领域，具体涉及一种基于调试器的网络请求抓包方法及系统。

背景技术

由于Flutter应用的网络请求是不通过手机的系统代理，在手机配置IP和端口号后，常用的代理工具Charles或Fiddler等，是抓不到请求的。为了解决Flutter Dio库支持网络请求抓包，一般用常见三种方式进行配置：一、直接在Dio库里面设置ip和端口号，通过硬编码的方式进行代理，但是这种硬编码的方式，不够灵活配置，每次更改代理都要重新打包；二、直接在原生插件获取手机代理ip和代理端口，自动获取手机代理的方法对IOS操作系统支持较好，Android的兼容性不是特别友好；三、在APP启动时，在原生端直接获取手机代理，通过channel调用flutter方法保存代理，在Dio初始化时进行设置，这种方式的缺点是两端都要设置代理。

发明内容

为此，本发明提供一种基于调试器的网络请求抓包方法及系统，旨在解决现有技术中无法对Flutter应用的网络请求进行抓包的问题，提供一种操作简单的操作方法，实时查看APP中的相关请求和响应信息。

为实现以上目的，本发明采用如下技术方案：

依据本发明第一方面，本发明提供一种基于调试器的网络请求抓包方法，所述方法包括：

基于Flutter可视化工具构建目标调试器；所述目标调试器为一前端配置页面；

将所述目标调试器嵌入目标APP，并设置所述目标调试器的开关状态；所述目标APP为利用Flutter网络框架开发的APP；

当所述目标APP运行时，对当前页面的网络请求进行抓包，得到网络请求抓包信息；利用所述目标调试器对所述网络请求抓包信息进行显示；

其中，所述网络请求抓包信息包括访问信息、代码部署状态、账号相关信息、Console信息中至少之一。

可选地，所述对当前页面的网络请求进行抓包之前，所述方法还包括：

为所述目标APP配置对应的代理地址以实现网络请求抓包；具体包括：

在客户端打开手机代理工具时，通过channel调用Flutter方法获取客户端的代理信息；所述代理信息包括客户端代理IP和端口号；

将所述代理信息保存至目标APP本地；

Dio对象初始化完成后，获取所述目标APP本地保存的所述代理信息连接目标代理服务器。

可选地，所述目标调试器包括请求信息单元、Deploy调度器单元、Console控制台单元以及账号信息管理单元中至少之一；

所述基于Flutter可视化工具构建目标调试器，包括：

利用所述Flutter可视化工具构建包含各所述功能单元对应调试图标的前端配置页面；

所述调试图标用于响应来自用户的点击操作使用对应的调试功能。

可选地，将所述目标调试器嵌入目标APP，并设置所述目标调试器的开关状态，包括：

在所述目标APP开发代码中引入所述目标调试器配置，并在所述目标APP首页将所述目标调试器的开关状态选择为开启。

可选地，所述对当前页面的网络请求进行抓包，得到网络请求抓包信息，包括：

通过Dio拦截器获取所述当前页面的所有请求信息，具体包括：

引入Dio包，在pubspec.yaml文件中引入Dio的版本；初始化对象并创建logs；自定义拦截器，获取针对当前页面的多个访问请求对应的访问信息；

其中，所述访问信息包括请求信息、响应信息、请求方式中至少之一。

可选地，所述方法还包括：

连接部署请求的Api，获取对应服务的代码部署状态；

其中，所述代码部署状态包括代码部署进度、应用更新时间中至少之一。

可选地，所述方法还包括：

在实时调试目标APP时，查看前端的Console信息；

其中，所述Console信息包括控制台输出、控制台信息中至少之一。

可选地，所述方法还包括：

复制当前登录的账号相关信息；

其中，所述账号相关信息包括TOKEN、账号信息中至少之一。

可选地，所述请求信息单元包括查看请求信息功能、查看响应信息功能、筛选请求方式功能、复制Curl信息功能、复制结果功能、复制全部功能、清除请求信息功能以及格式化响应信息功能中至少之一；

所述Deploy调度器单元包括查看代码部署进度功能、查看应用更像时间功能中至少之一；

所述Console控制台单元包括查看控制台输出功能、清除控制台信息功能中至少之一；

所述账号信息管理单元复制TOKEN功能、复制登录账号信息功能中至少之一。

依据本发明第二方面，本发明提供一种基于调试器的网络请求抓包系统，所述系统包括：

调试器构建模块，用于基于Flutter可视化工具构建目标调试器；所述目标调试器为一前端配置页面；

调试器嵌入模块，用于将所述目标调试器嵌入目标APP，并设置所述目标调试器的开关状态；所述目标APP为利用Flutter网络框架开发的APP；

信息获取模块，用于在所述目标APP运行时，对当前页面的网络请求进行抓包，得到网络请求抓包信息；

调试器显示模块，用于利用所述目标调试器对所述网络请求抓包信息进行显示。

本发明采用以上技术方案，至少具备以下有益效果：

通过本发明方案，基于Flutter可视化工具构建目标调试器；所述目标调试器为一前端配置页面；将所述目标调试器嵌入目标APP，并设置所述目标调试器的开关状态；所述目标APP为利用Flutter网络框架开发的APP；当所述目标APP运行时，对当前页面的网络请求进行抓包，得到网络请求抓包信息；利用所述目标调试器对所述网络请求抓包信息进行显示。由此，简化了使用Flutter跨端网络抓包的问题，利用Flutter可视化工具在APP中嵌入调试器配置，实现通过操作简单即可实时查看APP中的相关请求和响应信息；且调试器无侵入性，不会对现有APP的功能产生影响。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本发明。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1示出了本发明一实施例提供的基于调试器的网络请求抓包方法的流程示意图；

图2示出了本发明一实施例提供的基于调试器的网络请求抓包装置的结构示意图；

图3示出了本发明另一实施例提供的基于调试器的网络请求抓包装置的结构示意图；

图4示出了本发明一实施例提供的计算机设备的实体结构示意图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

本发明实施例提供了一种基于调试器的网络请求抓包方法，如图1所示，至少可以包括以下步骤S101～S104：

步骤S101，基于Flutter可视化工具构建目标调试器。

其中，Flutter是Google开源的UI工具包，通过一套代码库高效构建多平台应用，支持移动、Web、桌面和嵌入式平台。首先基于Flutter可视化工具构建目标调试器，目标调试器为一前端配置页面，包括获取网络请求抓包信息的多个功能单元，如目标调试器包括请求信息单元、Deploy调度器单元、Console控制台单元以及账号信息管理单元等。

具体地，可以利用Flutter可视化工具构建包含各功能模块对应调试图标的前端配置页面；调试图标用于响应来自用户的点击操作使用对应的调试功能。也就是说，通过目标调试器的前端配置页面上设置有针对上述各功能单元的调试图标，用户通过点击各功能单元的调试图标，可以查看对应的网络请求抓包信息。

步骤S102，将目标调试器嵌入目标APP，并设置目标调试器的开关状态。

需要说明的是，为了解决无法对Flutter应用的网络请求进行抓包的问题，本发明实施例中的目标APP为利用Flutter网络框架开发的APP。首先要在Flutter开发的目标APP代码中引用该调试器配置，并且在首页设置开关配置，用户可以主动选择开启调试器还是关闭调试器。在需要使用目标调试器时，用户需要将目标调试器的开关状态选择为开启。

步骤S103，当目标APP运行时，对当前页面的网络请求进行抓包，得到网络请求抓包信息。

需要说明的是，为了实现针对Flutter应用的网络请求抓包，需要先对目标APP配置对应的代理地址。具体包括：在客户端打开手机代理工具时，通过channel调用Flutter方法获取客户端的代理信息；代理信息包括客户端代理IP和端口号；将代理信息保存至目标APP本地；Dio对象初始化完成后，获取目标APP本地保存的代理信息连接目标代理服务器。

也就是说，客户端打开代理工具获取代理信息，在APP启动时，可以在原生端直接获取手机代理，通过channel调用flutter方法保存代理，判断是否需要连接代理，若需要连接代理服务器，则进行DNS解析，获取配置的域名映射的IP地址信息，获取到关联服务器返回的响应数据，进而连接作为代理的目标服务器，目标服务器发送数据报文到web服务器并返回数据，从而完成完整的网络访问。其中，flutter提供了channel来支持dart与原生平台的交互，channel是无状态通信，一次send/reply后调用就结束了，类似http的无状态通信。具体可以定一个MyChannel类，实现dart到原生的通信。实现步骤如下：

S1：定义一个channel客户端与服务端的标识

final String name；

S2：由于channel要求通信的数据类型是ByData，需要一个解码器将消息序列化/反序列化

final MessageCodec codec；

final BinaryMessenger binaryMessenger；

S3：使用flutter提供的defaultBinaryMessage实例，先将消息序列化，发送消息，再接收返回值并序列化

进而通过原生端接收到代理信息保存到本地，再使用Dio设置代理，在Dio对象初始化完成后，获取本地保存的代理信息进行设置。其中，Dio为一款网络请求的开源插件，有一个强大的Dart Http请求库，支持Restful API、FormData、拦截器、请求取消、Cookie管理、自定义适配器等。具体地，在Dio对象初始化完成后，可以利用第三方插件http_proxy自动获取手机的代理信息。代码示例如下：

进一步的，在完成针对Flutter应用的网络请求抓包的前置工作后，在目标APP的运行状态下，对当前页面的网络请求进行抓包，获取网络抓包信息。

其中，目标调试器包括四大功能单元：请求信息单元、Deploy调度器单元、Console控制台单元以及账号信息管理单元，用户可以通过点击各功能单元的调试图标，可以查看对应的网络请求抓包信息。其中，请求信息单元具有查看请求信息功能、查看响应信息功能、筛选请求方式功能、复制Curl信息功能、复制结果功能、复制全部功能、清除请求信息功能以及格式化响应信息功能等。请求信息指的是一个请求接口的头部header信息；响应信息指的是一个请求接口成功后response信息；Curl信息指的是通过Internet协议进行数据传输的工具；复制结果指的是利用copy功能，复制请求的response信息；复制全部指的是复制全部的请求信息，包括request请求信息、respinse响应信息；格式化响应信息是指对请求的response信息进行json格式化。

针对请求信息单元中包含的功能信息获取，可以通过Dio拦截器获取当前页面的所有请求信息，具体以下步骤：

S1：引入Dio包，在pubspec.yaml文件中引入Dio的版本；

S2：初始化对象并创建logs；

代码示例如：final dio＝Dio()；

dio.interceptors.add(LogInterceptor())；

S3：自定义拦截器，获取针对当前页面的多个访问请求对应的访问信息；其中，访问信息包括请求信息、响应信息、请求方式等。首先创建一个终端列表final listPaths＝<String>[‘’]

在检查请求地址的时候，进行端点匹配,使用contains方法listPaths.contains()

若端点匹配成功，则可以进行追加令牌验证options.headers.addAll({‘Authorization’:token})

其中，请求方式可以包括GET、POST、PUT、DELETE等。

以获取请求信息为例，代码示例为：

以获取Curl信息为例，代码示例为：

以获取响应信息为例，代码示例如下：

进一步地，Deploy调度器单元具有查看代码部署进度功能、查看应用更像时间功能等。针对Deploy调度器单元中包含的功能信息的获取，可以连接部署请求的Api，获取对应服务的代码部署状态。其中，代码部署状态包括代码部署进度以及应用更新时间。代码部署进度需要连接到对应的项目部署服务器，查看部署进度。应用更新时间，可以通过获取服务器上项目部署成功的时间。

进一步地，Console控制台单元具有查看控制台输出功能、清除控制台信息功能等。其中，控制台输出类似于浏览器中调试器对应的Console功能，控制台信息指的是包括请求、Console、Deploy的大菜单模块。针对Console控制台单元中包含的功能信息的获取，可以通过在实时调试目标APP时，查看前端的Console信息。

进一步地，账号信息管理单元具有复制TOKEN功能、复制登录账号信息功能等。其中，登录的TOKEN信息指的是当前用户请求加密的信息，例如：请求接口中的Cookie信息，请求接口中的TOKEN加密信息；帐号相关的信息主要指当前登录帐号的用户名信息。针对Console控制台单元中包含的功能信息的获取，可以通过复制当前登录的账号相关信息。

步骤S104，利用所述目标调试器对所述网络请求抓包信息进行显示。

响应于来自用户针对各功能单元的调试图标进行点击发出的信息查看指令，通过目标调试器的前端配置页面显示对应的网络请求抓包信息。

本发明实施例提供了一种基于调试器的网络请求抓包方法，实现嵌入调试器配置后，可以不用配置代理，即可实现网络的抓包方式。在APP当前页面抓包的网络请求，可以通过Dio不同的请求方法进行分类筛选，并且可以实时查看请求的入参和响应结果。在调试器的界面中加入控制台的输出结果，可以实时调试debug数据。在网络请求的页面，加入复制CURL、复制响应结果、查看请求信息、查看响应信息、筛选请求方式等功能，可以在APP中实现抓包的功能，提高调试的效率。在调试器的页面中，加入Deploy调度器模块，可以实时监控服务器跟新代码的状态。本发明提供的基于调试器的网络请求抓包方法操作简单，只需要在打开APP的时候，开启调式即可以实现抓包功能，解决了无需打开第三方代理工具，并且在打开的APP的时候，不需要手动输入IP和端口号进行Dio设置代理验证；且兼容性好，由于Flutter支持多语言平台，该调试器配置在嵌入Flutter工具包时，在Android和IOS系统也可以保持一致的调试模式。

进一步地，作为图1的具体实现，本发明实施例提供了一种基于调试器的网络请求抓包系统，如图2所示，该系统可以包括：调试器构建模块210、调试器嵌入模块220、信息获取模块230以及调试器显示模块240。

调试器构建模块210，可以用于基于Flutter可视化工具构建目标调试器；目标调试器为一前端配置页面；

调试器嵌入模块220，可以用于将目标调试器嵌入目标APP，并设置目标调试器的开关状态；目标APP为利用Flutter网络框架开发的APP；

信息获取模块230，可以用于在目标APP运行时，对当前页面的网络请求进行抓包，得到网络请求抓包信息；

调试器显示模块240，可以用于利用目标调试器对网络请求抓包信息进行显示。

可选地，如图3所示，本发明另一实施例提供的一种基于调试器的网络请求抓包系统，还包括：请求抓包配置模块250。

请求抓包配置模块250，可以用于为目标APP配置对应的代理地址以实现网络请求抓包；具体包括：

在客户端打开手机代理工具时，通过channel调用Flutter方法获取客户端的代理信息；代理信息包括客户端代理IP和端口号；

将代理信息保存至目标APP本地；

Dio对象初始化完成后，获取目标APP本地保存的代理信息连接目标代理服务器。

可选地，调试器构建模块210，还可以用于利用Flutter可视化工具构建包含各功能单元对应调试图标的前端配置页面；

调试图标用于响应来自用户的点击操作使用对应的调试功能。

可选地，调试器嵌入模块220，还可以用于在目标APP开发代码中引入目标调试器配置，并在目标APP首页将目标调试器的开关状态选择为开启。

可选地，信息获取模块230，还可以用于通过Dio拦截器获取当前页面的所有请求信息，具体包括：

引入Dio包，在pubspec.yaml文件中引入Dio的版本；初始化对象并创建logs；自定义拦截器，获取针对当前页面的多个访问请求对应的访问信息。

可选地，信息获取模块230，还可以用于连接部署请求的Api，获取对应服务的代码部署状态。

可选地，信息获取模块230，还可以用于在实时调试目标APP时，查看前端的Console信息。

可选地，信息获取模块230，还可以用于复制当前登录的账号相关信息。

需要说明的是，本发明实施例提供的一种基于调试器的网络请求抓包系统所涉及各功能模块的其他相应描述，可以参考图1所示方法的对应描述，在此不再赘述。

基于上述如图1所示方法，相应的，本发明实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述任一实施例所述的基于调试器的网络请求抓包方法的步骤。

基于上述如图1所示方法和如图3所示系统的实施例，本发明实施例还提供了一种计算机设备的实体结构图，如图4所示，该计算机设备可以包括通信总线、处理器、存储器和通信接口，还可以包括、输入输出接口和显示设备，其中，各个功能单元之间可以通过总线完成相互间的通信。该存储器存储有计算机程序，处理器，用于执行存储器上所存放的程序，执行上述实施例所述的基于调试器的网络请求抓包方法的步骤。

所属领域的技术人员可以清楚地了解到，上述描述的系统、装置、模块和单元的具体工作过程，可以参考前述方法实施例中的对应过程，为简洁起见，在此不另赘述。

另外，在本发明各个实施例中的各功能单元可以物理上相互独立，也可以两个或两个以上功能单元集成在一起，还可以全部功能单元都集成在一个处理单元中。上述集成的功能单元既可以采用硬件的形式实现，也可以采用软件或者固件的形式实现。

本领域普通技术人员可以理解：所述集成的功能单元如果以软件的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，其包括若干指令，用以使得一台计算设备(例如个人计算机，服务器，或者网络设备等)在运行所述指令时执行本发明各实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM)、随机存取存储器(RAM)，磁碟或者光盘等各种可以存储程序代码的介质。

或者，实现前述方法实施例的全部或部分步骤可以通过程序指令相关的硬件(诸如个人计算机，服务器，或者网络设备等的计算设备)来完成，所述程序指令可以存储于一计算机可读取存储介质中，当所述程序指令被计算设备的处理器执行时，所述计算设备执行本发明各实施例所述方法的全部或部分步骤。

最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：在本发明的精神和原则之内，其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案脱离本发明的保护范围。

Claims (10)

1.一种基于调试器的网络请求抓包方法，其特征在于，所述方法包括：

基于Flutter可视化工具构建目标调试器；所述目标调试器为一前端配置页面；

将所述目标调试器嵌入目标APP，并设置所述目标调试器的开关状态；所述目标APP为利用Flutter网络框架开发的APP；

当所述目标APP运行时，对当前页面的网络请求进行抓包，得到网络请求抓包信息；利用所述目标调试器对所述网络请求抓包信息进行显示；

其中，所述网络请求抓包信息包括访问信息、代码部署状态、账号相关信息、Console信息中至少之一。

2.根据权利要求1所述的方法，其特征在于，所述对当前页面的网络请求进行抓包之前，所述方法还包括：

为所述目标APP配置对应的代理地址以实现网络请求抓包；具体包括：

在客户端打开手机代理工具时，通过channel调用Flutter方法获取客户端的代理信息；所述代理信息包括客户端代理IP和端口号；

将所述代理信息保存至目标APP本地；

Dio对象初始化完成后，获取所述目标APP本地保存的所述代理信息连接目标代理服务器。

3.根据权利要求1所述的方法，其特征在于，所述目标调试器包括请求信息单元、Deploy调度器单元、Console控制台单元以及账号信息管理单元中至少之一；

所述基于Flutter可视化工具构建目标调试器，包括：

利用所述Flutter可视化工具构建包含各所述功能单元对应调试图标的前端配置页面；

所述调试图标用于响应来自用户的点击操作使用对应的调试功能。

4.根据权利要求1所述的方法，其特征在于，将所述目标调试器嵌入目标APP，并设置所述目标调试器的开关状态，包括：

在所述目标APP开发代码中引入所述目标调试器配置，并在所述目标APP首页将所述目标调试器的开关状态选择为开启。

5.根据权利要求1所述的方法，其特征在于，所述对当前页面的网络请求进行抓包，得到网络请求抓包信息，包括：

通过Dio拦截器获取所述当前页面的所有请求信息，具体包括：

引入Dio包，在pubspec.yaml文件中引入Dio的版本；初始化对象并创建logs；自定义拦截器，获取针对当前页面的多个访问请求对应的访问信息；

其中，所述访问信息包括请求信息、响应信息、请求方式中至少之一。

6.根据权利要求1所述的方法，其特征在于，所述方法还包括：

连接部署请求的Api，获取对应服务的代码部署状态；

其中，所述代码部署状态包括代码部署进度、应用更新时间中至少之一。

7.根据权利要求1所述的方法，其特征在于，所述方法还包括：

在实时调试目标APP时，查看前端的Console信息；

其中，所述Console信息包括控制台输出、控制台信息中至少之一。

8.根据权利要求1所述的方法，其特征在于，所述方法还包括：

复制当前登录的账号相关信息；

其中，所述账号相关信息包括TOKEN、账号信息中至少之一。

9.根据权利要求3所述的方法，其特征在于，

所述请求信息单元包括查看请求信息功能、查看响应信息功能、筛选请求方式功能、复制Curl信息功能、复制结果功能、复制全部功能、清除请求信息功能以及格式化响应信息功能中至少之一；

所述Deploy调度器单元包括查看代码部署进度功能、查看应用更像时间功能中至少之一；

所述Console控制台单元包括查看控制台输出功能、清除控制台信息功能中至少之一；

所述账号信息管理单元复制TOKEN功能、复制登录账号信息功能中至少之一。

10.一种基于调试器的网络请求抓包系统，其特征在于，所述系统包括：

调试器构建模块，用于基于Flutter可视化工具构建目标调试器；所述目标调试器为一前端配置页面；

调试器嵌入模块，用于将所述目标调试器嵌入目标APP，并设置所述目标调试器的开关状态；所述目标APP为利用Flutter网络框架开发的APP；

信息获取模块，用于在所述目标APP运行时，对当前页面的网络请求进行抓包，得到网络请求抓包信息；

调试器显示模块，用于利用所述目标调试器对所述网络请求抓包信息进行显示。

Images