Why Fiddler?

The reason is simple: most of the test students use Fiddler. Although different package capture tools have similar functions, just as unified development tools can improve team collaboration, unified development and testing tools can improve communication efficiency. If you’re having a problem with Fiddler — for example, a request you can’t catch — you’ll drive your student crazy by replying: “I can whistle/ Charles!”

Lead to

Download the Fiddler Everywhere

Download address: www.telerik.com/download/fi…

The reason for using this version is that, as a front-end developer, Fiddler Everywhere is perfect for my needs because I can only use it to grab packages and don’t need a lot of bells and whistles.

Configuring proxy Listening

Once you’ve downloaded and installed your Fiddler account, you’ll see the following screen:

Click on the Settings button in the upper right corner, click on the HTTPS Tab, check Capture HTTPS Traffic, and then click on the Trust Root Certificate button.

Next, click the Connections Tab, fill in a port number, and check the two boxes below: Act as System Proxy on startup and Allow Remote Computers to connect.

Then click Save to Save the Settings.

Packet capture on the mobile terminal

Take iOS as an example:

Step one: Connect your phone and computer to the same network, such as the company’s WIFI.

Configure the agent

Step 2: Edit the WIFI connection and you’ll see something like the following:

Click on the configure Proxy at the bottom, select Manual, and fill in the server (the IP address of your computer) and port (the listening port set up in Fidder).

Install and trust certificates

Open ${IP}:${fiddlerPort} in a mobile browser and you will see the following screen. IP indicates the IP address of the current computer. FiddlerPort is the listening port set in Fiddler last step.

Click on the FiddlerRoot Certificate link to download it.

Enter Settings after downloading => The description file has been downloaded, click to enter and install.

Think this is the end of it? No, although we have installed the certificate, but there is no trust, so there is no way to capture packages.

Go to Settings => General => For local => Certificate Trust Settings, trust Fiddler certificate.

Note: The certificate installation methods vary with mobile phones and OS versions. See installing certificates at the bottom of this article for details

H5 Packet capture test

Open Safari on your phone, go to www.baidu.com, and check out Fiddler:

You can see a lot of requests from www.baidu.com, click on any one:

On the right you can see that this is an image request, and you can see the request and response information associated with it. At this point, our H5 capture package is successful.

Small program packet capture test

We casually enter a small program to see the effect, here is the choice of Beijing xi small program. After entering, we can see many requests, click on a request, just like h5, we can still see the request and response of the request.

And you’re done.

Installation Certificate Guide

MIUI 12 (Xiaomi)

Download the certificate

Open the terminal on the PC and check the IP address (Windows command is ipconfig, MAC command is ifconfig).

Then our COMPUTER IP is 192.168.43.216, plus the port name configured in Fiddler, we get the installation path of our certificate: 192.168.43.216:8866. Open it in the mobile browser, you will see the following interface:

Click on the text link at the end to download the certificate.

Install the certificate

MIUI system is different from other Android phones in that other phones (such as Huawei) download the certificate and click on the certificate file to install, but Xiaomi requires a separate installation step.

Enter Settings => Password and Security => System Security => Encryption and Credentials => Install certificate => CA certificate. The following interface is displayed:

Click the “Still Install” button in the lower left corner (this step requires fingerprint or password verification) to enter the certificate file selection interface:

Usually the certificate file we just downloaded will not be displayed here, so how to find it?

For example, if our certificate is downloaded using quark Browser, enter the download interface of Quark Browser and check the download path Settings in the download Settings:

Here you can see which folder our files are stored in after downloading, for example, Quark/Download(the previous /storage/emulated/0 is ignored)

Go back to the certificate file selection page above, click the menu button in the upper left corner and select your own device:

Then go to the directory where you downloaded the certificate from Quark above:

Find the certificate you just downloaded and click to install it.

And you’re done.