If you’re a front-end developer or tester, Fiddler is one of the best tools to use. Fiddler is one of the most powerful web debugging tools available. It logs HTTP/HTTPS requests and responses from all clients and servers, allowing you to monitor, set breakpoints for debugging, and even tamper with requests and responses.

1. How Fiddler works

Fiddler sets up a proxy server between the browser and the server. Fiddler works as a proxy Web server using the proxy address 127.0.0.1 and port 8888. Fiddler automatically logs out when it exits, so it doesn’t affect other programs.

Ii. Application scenarios of Fiddler

1. Host configuration of the development environment;

2. Joint adjustment of front and rear end interfaces

3. Locate online bugs — distribute files to local proxy to quickly locate online bugs;

4. Performance analysis and optimization — Inspectors and Timeline

Iii. Installation and configuration of Fiddler

Fiddler does not have a mobile phone client, but is installed on a PC. To capture programs on the mobile phone, you need to configure Fiddler on the PC and the mobile phone. The steps are as follows:

Prerequisites:

1). The test phone needs to support Wifi

2). The mobile phone and computer need the same network for testing

(1) Download Fiddler on your computer

Website: www.telerik.com/feddler

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

(2) PC Fiddler configuration

Allow listening for HTTPS

Open Fiddler Tool->Fiddler Options->HTTPS.

Select Capture HTTPS CONNECTs (to Capture HTTPS connections), Decrypt HTTPS traffic (to Decrypt HTTPS requests) and Ignore Server certificate errors (to ignore server certificate errors)

Install the certificate (if no certificate is used for the first time, it will pop up whether to trust Fiddler certificate and the security prompt, click yes directly) and restart Fiddler to take effect.

Note:

Win7 系统 HTTPS 在.net Framework4.0上 系统 有bug

The solution is:

CMD command line to find fiddler’s installation directory as follows:

cdC:\Users\JayshSoft\AppData\Local\Programs\Fiddler // Fiddler installation directoryCopy the code

Then execute the following command

makecert.exe -r -ss my -n "CN=DO_NOT_TRUST_FiddlerRoot, O=DO_NOT_TRUST, OU=Created by http://www.fiddler2.com"- Sky Signator-EKU 1.3.6.1.5.5.7.3.1 -h 1-CY authority-A SHA1-M 120-B 22/11/2020Copy the code

** Note: ** the last date of this command, 22/11/2020, must be greater than the current date or the creation certificate will be out of date.

Allow remote cell phone connection

Click Fiddler->Tools -> Options. In the Connections panel, select Allow remote Computers to connect to other devices (Fiddler restarts to do this).

“Fiddler listens on port:” defaults to 8888. If port 8888 is used on your PC, fill in an unused port

Check the COMPUTER IP address

Enter ipconfig on the CMD command line interface

Or place the mouse over online in the upper right corner of Fiddler to display the COMPUTER’s IP address.

(2) Mobile terminal configuration

To capture these APP packages, you need to import the Fiddler proxy server certificate to your phone.

How to import: Open your browser, type in the proxy server’S IP and port (IP for your computer and port for Fiddler) in the address bar, get a page from Fiddler, and decide to install

Choose Mobile phone Settings > WlAN, and select the connected wifi (ensure that the PC and mobile terminal are on the same network segment).

Long press the wifi, then select “Modify network”, then select “Show advanced options”, select manual proxy Settings, enter the IP address of Fiddler’s computer host name, enter the Fiddler port (default 8888), save.

After the configuration, if other web addresses of the mobile browser cannot be accessed, you can fill in the “Do not use proxy for the following web addresses” and access the Internet

4. Use of Fiddler

(1) View function area

The concept of a session: a request and a response is a session.

  • Fiddler main interface

Several explanations are commonly used in shortcut areas

  • Shortcut area

1: adds remarks to the session

2: reloads the current session

3: Deletes the session option

4: release, and breakpoint corresponding, explained in detail later

5: Response mode. That is, when Fiddler gets a remote response, does it cache it for the client or does it respond directly as a stream?

6: decoding. Some requests are encoded and can be automatically decoded by clicking the button based on the encoding format of the response.

7: Find the session.

8: Saves the session.

9: Screen shots. After a screenshot is taken, a screenshot is returned as a session.

  • The session list

# bar icon description

(2) Tampering with the request

When testing, you are sure to encounter this situation, see the form below (use “ip.360.cn/#/ipquery” website…

I have entered a wrong IP address in this form, and the result is that the front end has thrown up the problem of wrong IP address, restricting me to click “query” button, but I also want to know if the front end does not limit, directly submit a wrong IP address to the server, see if the server can handle it, then what should I do?

Use the fiddler. Open Fiddler and select Rules->Automatic Breakpoints->Before Requests, or click on the lower left corner of Fiddler until the red up arrow appears. Fiddler intercepts client request), as shown below:

Then, we change the form to a normal IP address such as “202.106.212.255” and click Query. After the search found the page no response, at that time the fiddler, find IP. 360. Cn/IPQuery/IPQuery the upload request signature also has a red arrow, said that we have successfully blocked the request. The Inspectors on the left side will be shown below the right Inspectors->TextView or WebForms screen to see the sending of the request:

Click on the value in the red box, change the IP to “202.106.212.256”, and then click on “Run to Completion” in the other red box to view the previous page:

Select JSON to see what the back end returns

At this point, we can say that not only the front-end, the original server IP address is also verified.

To the left of Fiddler’s “Run to Completion” button, there’s another button called “Break on Response.” What does that button do?

As the name suggests, “Run to Completion” means to Run straight to the end of the session, while “Break on Response” means to intercept the returned data again on return.

Okay, so that’s a little example of a basic tamper request, and hopefully you can use it in your work.

(2) Tamper with return

We just tampered with the request content, so can we tamper with the return content? For example, below the IP query input box is its return, indicating the IP address and the operator. What if I want to make a long return to see if the front page is distorted when the return data is long?

Using the example above, let’s set Fiddler to this: Select Rules->Automatic Breakpoints->After Responses, or click on the lower left corner of Fiddler until the red arrow down appears (down arrow indicates being intercepted by Fiddler during return) as follows:

Then, we submit a normal IP, such as “202.106.212.255”, and click Query.

Now that the front page is still not responding, we open Fiddler and see the return value of the request as follows:

As you can see, you are returning a JSON data structure in which the value of data is the data to be displayed on the page. Select RAW visualization and change the data value to a very long data.

I found that the front page truncated the long data I returned.

This is a small example of a tamper return, and I hope you can use it in the real world.

(3) the command line

Fiddler’s command line is very powerful for filtering and manipulating all sessions. The location of the command line is in the black box in the lower left corner. Here are some useful commands.

  • ? Sometext command

When you type on the command line? Press Enter after the next string, and Fiddler will highlight sessions in the current session list whose URL contains the string. This command is handy for finding a specific request or response. Such as:

? PNG This command selects sessions for all images with the PNG suffix.

  • Select sessions in the session list that are larger or smaller than a specific size

For example, to search for sessions whose value is greater than 10K in the session list: > 10K or >10000 If there is no K, the unit is byte. When you look for less than, you just replace the greater than sign with the less than sign.

  • Find the session that returns a specific status code

Type =200 to find all sessions whose return code is 200

  • Find sessions that use specific methods (such as GET or POST)

Type =get to highlight the GET request and response.

  • Select the session for a specific host

Enter @image.baidu.com to search for the session whose Host bar is Image.baidu.com in fiddler interface

  • Pre-set session bold

We can use the bold sometext command to pre-set the session after someText appears in the URL.

For example, bold image.baidu.com After this command is configured, all sessions containing image.baidu.com in the URL are displayed in bold and black. To clear this directive, just type bold again, bold with no arguments.

  • Bpu offering somestring command

The bPU command creates request breakpoints on the URI containing the specified string, and each setting clears all previously set breakpoints, and all request breakpoints if there are no arguments. Examples are as follows:

bpu /index.php

This command sets a breakpoint at each /index.php request. Remember the requirement to “intercept only part of the request”? Just use this command.

  • Bpafter somestring command

The bpafter command creates a response breakpoint for the URI containing the specified string. Each setting clears all previously set breakpoints, and if no arguments, clears all response breakpoints as follows:

bpafter /favicon.ico

A breakpoint is set when the Favicon.ico resource is returned.

  • BPS command

Breakpoint Status interrupts the response matching the set status code, for example:

bps 404

Fiddler commands are basically set with parameters and unset without parameters.

  • BPV or BPM command

Both commands create breakpoints for the specified HTTP method without any difference, as in:

bpm get

Breakpoints are set for all GET requests.

  • The clear command

This command knows all sessions in the session list. It has the same function as’ Ctrl+ X ‘. You are advised to use the shortcut key.

  • The dump command

Save all current sessions to local

  • urlreplace oldStr newStr

This command replaces oldStr with newStr in the URL, for example:

There is a session whose URL is “www.haosou.com/?src=so.com…

I execute the following command:

urlreplace src=so.com src=baidu.com

Refresh the page again and find that the URL is “www.haosou.com/?src=baidu….

  • select MIME

Select the session whose content-type header contains the specified string. This command can be used to select a file format, such as:

select image

This directive will highlight all image sessions;

select js

This directive highlights all JS request responses.

(4) Simulate slow network speed

Sometimes, we want to see how our Web pages perform on a slow Internet connection, and how a rendering of the page looks, but we have no choice but to go to the company’s network is too fast, what to do? Fiddler will do the trick. Because Fiddler is a proxy, we have introduced that Fiddler can intercept the request and return, which can definitely delay the upload process of the requested data or extend the download process of the returned data, so as to limit the network speed. Let’s take a step by step look at how to limit Internet speed.

First go to Rules->Customize Rules and search for the place “m_SimulateModem” as follows:

if (m_SimulateModem) {
    // Delay sends by 300ms per KB uploaded.
    oSession["request-trickle-delay"] = "300"; 
    // Delay receives by 150ms per KB downloaded.
    oSession["response-trickle-delay"] = "150"; 
}
Copy the code

The first value sets the delay in the request upload process. The second value returns the download delay. For example, I change the first value of 300(in milliseconds) to 2000 and save it. After saving, click Rules->Performance->Simulate Modem Speeds. Then you can open up any web page and see if it’s slowing down. Is it actually slower? Ha ha.

(5) As an interface test tool

Another powerful feature of Fiddler is that it can be used as an interface testing tool to send arbitrary requests. Let’s take the simplest GET request as an example.

Fiddler has a Composer TAB on the right that can be used to send HTTP requests. The diagram below:

We send a GET request, the URL is api.github.com/events, and send…

User-agent: Fiddler then click Execute on the right to send the command successfully. After sending, there will be the request we just sent in the session list on the left. After double-clicking the session, you can see the returned content in the Response window on the lower right.

(6) Session Filters

Sometimes we only need to focus on requests and responses from a particular domain or application, but Fiddler, if left to itself, captures all interactions between the application and the server by default. In order not to distract us from irrelevant sessions, Fiddler can be set to grab only certain sessions

First, click “Filters” on the right side of the Fiddler window, check “Use Filters” in position 2, then select “Show only the following Hosts” from the drop-down list in position 3 and type “*.360.cn;” “Indicates that we only want to focus on sessions whose domain name suffix is 360.cn. After saving, we can test.

The Filter function is very powerful, just through the domain name to take a small example, it can also complete such as display only Intranet IP request response, display only specific software request response, header matching any rule request response, etc., etc., waiting for you to explore.

(7) Customize session columns

The session columns on the left of Fiddler include Result, Protocol, Host, URL, content-Type, and so on. I need to know the IP address of the current request and reply server, so it would be nice to add a column of “ServerIP” to Fiddler that shows the IP address for each session. That’s exactly what Fiddler does:

Open Rules->Customize Rules, then look for the string static function Main() and add the following line to the end of its method body:

FiddlerObject.UI.lvSessions.AddBoundColumn("ServerIP".120."X-HostIP");
Copy the code

The code for the entire method is as follows:

static function Main(a) {
        var today: Date = new Date();
        FiddlerObject.StatusText = " CustomRules.js was loaded at: " + today;

        // Uncomment to add a "Server" column containing the response "Server" header, if present
        // UI.lvSessions.AddBoundColumn("Server", 50, "@response.server");

        // Uncomment to add a global hotkey (Win+G) that invokes the ExecAction method below...
        // UI.RegisterCustomHotkey(HotkeyModifiers.Windows, Keys.G, "screenshot"); 
        FiddlerObject.UI.lvSessions.AddBoundColumn("ServerIP".120."X-HostIP");
}
Copy the code

Once set up, restart Fiddler and visit any web site to see the effect.

(8) Text encoding transcoding tool TextWizard

Sometimes, we’d like to know what u5317\u4eac “would mean for a Unicode string, so fiddler would translate them: Just go to Tools->TextWizard and it would come in a box like this:

textwizard.png

“Beijing,” the translator learned.

You can also URLEncode and Decode, for example, www.baidu.com/s?wd=%E4%BD… www.baidu.com/s?wd= Hello.

Of course, Base64 codec and other encryption and decryption algorithms can also be carried out.

(9) AutoResponder replaces the response

Sometimes, we may have such a requirement: a js online has a problem and needs to be fixed, so after the repair, I need to verify the correct before I can go online, how to verify? I can use Fiddler to set a rule. When I request A.js online, I replace A.js with locally repaired B.js to see if it is correctly repaired. After the test is correct, I can directly put the repaired JS online. You might also run into the problem of a button in a mobile app that redirects you to “www.baidu.com,” but when I tested it, I might have to change the redirect address to “http://www.haosou…

Next, I went to qihoo 360’s searchable URL and had it open baidu instead.

First, select the “AutoResponder” TAB on the right side of Fiddler and do the following:

As you can see, we have added a rule to the AutoResponder TAB interface, which looks like this:

If request matches “www.haosou.com”, then respond with “www.baidu.com”, respond with a searchable URL. Next, can visit next good search to try, come out is Baidu absolutely.

5. Reference materials

[1] www.cnblogs.com/chaseHard/a…