This article has participated in the good article call order activity, click to see: back end, big front end double track submission, 20,000 yuan prize pool for you to challenge!

This article is about the introduction of the Fiddler tool study notes, here to summarize and share the shortcomings

As a front-end brick loader, I have been troubled by two problems for a long time. One is that the data returned by the interface of the background project is empty, so it is not convenient to further check, change and test the data. The other is to do mobile terminal projects, such as Uniapp. Every time there was an interface problem, I could only debug on console in HBuilder, which was very painful. Later, I found that OUR TE student used Fiddler for packet capture test. The discovery can directly solve the two problems just mentioned, so I will share them here.

Introduction to the

  • Fiddler is an HTTP proxy on both the client and server sides
  • One of the most commonly used HTTP packet capture tools
  • It is very powerful and a great tool for Web debugging
    • Monitors all HTTP/HTTPS traffic of the browser
    • View and analyze the request content details
    • Forge client requests and server responses
    • Decrypt HTTPS Web sessions
    • Global and local breakpoints
    • Third party plug-in
  • Usage scenarios
    • Interface testing and debugging
    • Online environment debugging
    • Web Performance Analysis

download

Go to the website and download The Fiddler Classic:

The principle of

Learn a new thing and know why you’re doing it so you don’t panic. Here’s how Fiddler catches bags.

Fiddler is an HTTP proxy that sits between the client and server. Once you start Fiddler, it automatically sets the proxy server to port 8888 and acts as system proxy on startup. To view the Fiddler, go to ‘Tools > Options > Connections’.



With Fiddler running, you can see it in Settings -> Advanced -> System -> Open your computer’s proxy Settings -> Connections -> LOCAL area Network (LAN) Settings in Chrome, for example. The ‘use a proxy server for your LAN’ option under ‘Proxy server’ is checked (it is not checked by default if Fiddler is not running), as shown below:



Click on ‘Advanced’ and you will see that ‘Proxy server address to use’ is the local IP address, port 8888. The diagram below:



This means that HTTP requests/responses from the browser are forwarded to the system’s port 8888 and intercepted by Fiddler.

Interface is introduced

Let’s take a look at the entire Fiddler interface

The toolbar

Here are some of the marked features in the figure above that I think are commonly used:

  1. Replay: Replay the selected request and press shift + R at the same time to enter the number of repeated requests (these requests were sent serial). It can be used to test replay attacks.
  2. Deleting sessions
  3. Continue a request with a break point: the request will be blocked in Fiddler after the break point. Click the Go button to continue sending. The way to break the point is to click the space at the bottom of the interface, as shown in the figure below:

  1. This sight-like tool is used to select the app to grab the request: hold and drag the mouse over the target app
  2. Can be used to find a request, for example, you know a field in the request parameters, can directly enter to find
  3. Encoding and decoding tool, which can convert a variety of encodings, is a tool that I find quite useful. It can encode formats including but not limited to Base64, MD5, URLEncode, etc
  4. You can view information such as the local IP address (including IPv4 and IPv6) without having to enter ipconfig in CMD, as shown below:

Session List

In the left half of the interface is the session list, where each CAPTURED HTTP request is listed. Each request is called a session, as shown in the figure below:

Each session contains information by default

  • Request status code (result)
  • Protocol
  • Host name (host)
  • URL
  • Request size (body, in bytes)
  • Caching information
  • Response type (Content-type)
  • Windows process and process ID (Process)

The custom column

In addition to the above, we can also add custom columns. For example, if we want to add a column of request method information:

  1. Click on the menu bar -> Rules -> Customize Rules to bring up the Fiddler ScriptEditor window
  2. Press CTRL + F and enter static function Main() to find it
  3. Then in the found function Main add:
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;
}
Copy the code

The picture is as follows:

4. Press CTRL + S to save the Settings. You can then see an extra column in the session list called Method, which contains the requested Method.

Sort and move

  1. Click on the list header for each column to sort in reverse order
  2. Drag while holding the list head to change the list position

QuickExec with the status bar

The black line at the bottom of the software interface is QuickExec, which is used to quickly execute certain commands. For details, type help to go to the official help page. The picture is as follows:



Below QuickExec is the status bar,

  1. Capturing: This means that Fiddler’s proxy is currently enabled for blocking requests and responses. To disable the proxy, just click on the Capturing icon
  2. All Processes: Select the Processes to be crawled. You can select only browser Processes or non-browser Processes
  3. Breakpoint: Once is a pre-request breakpoint, which stops the request from the browser to Fiddler. Pressing again is a breakpoint after the response, where the response is sent from the server and stops at Fiddler; Push it one more time so you don’t interrupt the point
  4. Number of sessions/conference calls currently selected
  5. Additional information

Auxiliary labels + tools

The large panel on the right side of the software interface is called the Auxiliary Tabs + tool, as shown below. It has 10 small tabs. Let’s start with Statistics, BTW, which is pronounced as [stə tɪ tɪks], and the third letter a is pronounced as ə, not æ’~

Statistics (Statistics)

DNS Lookup (DNS Lookup time), TCP/IP Connect (TCP/IP connection time), and so on.

Inspectors



For example, if the request parameters are X-wwW-form-urlencoded, you will be able to view the request packet and the response packet in various ways. If the request parameters are X-wwW-form-Urlencoded, you will be able to view the request packet in WebForms…

AutoResponder



This is one of the more useful features I find, the ability to manipulate the data returned from the server in order to fool the browser.

Practical cases

When I was working on a background project, because the foreground was not ready yet, the database had no data, and when I fetched the list, all I got was the empty array as shown in the figure below:



Then the display on the page is “temporary no data”, which affects the interface docking of some deleted data later.



At this point, we can use the AutoResponder to edit the returned instance of the interface document, as follows:

  1. Check Enable Rules and Unmatched requests passthrough.



2. Select the request to modify the response from the left session list, hold down the mouse and drag it directly to the AutoResponder panel, as shown in the red box below:



3. Right-click the request in the red box above and select Edit Response…



4. Go to the edit panel and select the Raw label to edit directly. Here I add data to the Items array according to the interface document return example, as shown below:



In this way, the browser receives the data and the page has content, as shown in the figure below, to facilitate subsequent operations

Composer (designer)

Having said that about tampering with responses, I now introduce composer for tampering with requests. The translation of this word is that the composer modifs a request according to our ideas, just as a composer writes a piece of music.



Similar to the AutoResponder, you can drag and drop a request from the session list into the red box above and modify the content of the request. One of the application scenarios is to bypass some front-end writing restrictions and verification with JS, directly send the request, through the returned data can judge whether there are restrictions on the backend, test the robustness of the system.

Filters (Filters)

By default, the Filters will grab all the available requests and list them in the session list on the left. If you want to test some interfaces, you may find the list of requests to be messy. In this case, click on the Filters tag and select Use Filters to start the filter tool, as shown below:



Then we can filter the captured interfaces shown in the list on the left according to our needs. For example, we can filter according to Hosts to display only the requests whose Hosts are api.juejin.cn. Select ‘Show only the following Hosts’ in Hosts as shown below, and click ‘Run Filterset now’ in Actions in the upper right corner to perform the filtering.



There are many filter conditions, such as whether the URL in the request header field contains a certain word, etc., are very simple and easy to see, so I won’t go into detail here.

HTTPS caught

By default, Fiddler cannot display HTTPS requests, requiring a certificate installation:

  1. Go to ‘Tools -> Options… ‘, and select ‘Decrypt HTTPS traffic’

  1. Click the Actions button, click ‘Reset All certiccertificates’, and when you see a window that pops up, just click ‘OK’ or ‘Yes’ All the time.

  1. Check whether the Certificate is installed successfully: Click ‘Open Windows Certificate Manager’ to Open the Windows Certificate Manager window



Click On ‘Action’ and select ‘Find Certificates’ and enter fiddler in the’ Include ‘field to find them



If the search result is similar to the following figure, the certificate is successfully installed



The session list will now successfully display HTTPS requests.

Breakpoint application

Global breakpoint

‘Rules -> Automatic Breakpoints’ can be used to give Breakpoints to requests. There are two types of Breakpoints:

  1. Before Requests breakpoint: Interrupts Before Requests are sent to the server
  2. After Responses: Interrupts before Responses are returned to the client



Once the breakpoint is set, select the request that you want to modify the transmission parameters and press R to resend. The request will be intercepted either before or after the request, as required, and you can modify it as needed. Then click ‘Go’ on the toolbar, or click the green button ‘Run to Completion’ as shown below. Continue to complete the request.



This break point is a global break point, meaning that all requests will be intercepted. Local breakpoints are described below.

Local breakpoint

If you want to interrupt only one request, you can enter the corresponding command in QuickExec to execute.

  • Pre-request breakpoint
  1. In QuickExec inputbpu query_adverts. Note: query_adverts is part of the REQUESTED URL, so only requests that have query_adverts in their URL will be broken.

  1. If you press Enter, you can see that the red box says query_adverts has been breakpoint, and it’s a RequestURI

  1. Select the request with query_adverts in the URL and press R to send it again. It will be interrupted before it can reach the server.

  1. Cancel breakpoints: Enter in QuickExecbpuPress Enter
  • Post-response breakpoint

This is basically the same as the breakpoint step before the request. The difference is that the command entered is bpafter get_today_status. After pressing Enter, click ‘Execute’ under the ‘Composer’ label to Execute the request. Note that the red icon differs from the previous request breakpoint in that there is an up arrow and a down arrow.



Unintercepting is inputbpafterWhen you press enter, the status bar says ‘ResponseURI Breakpoint Cleared ‘

Weak network test

Fiddler can also be used for weak network testing, ‘Rules -> Performance -> check Simulate Modem Speeds’



Refreshing the web page again will feel like a throwback to the days of dial-up Internet, and will allow you to test your site’s performance at very low speeds.

Modify the speed

Click on the ‘FiddlerScript’ TAB, search for simulateM in the green box below, press Enter to find if (m_SimulateModem) this code, you can change the speed of up and down transmission:

Android bag capture

The last part of the main content is about mobile phone bag capture, I am using mi phone 9, MIUI 12.5.1 stable version, Android version 11.

  1. First, make sure the computer with Fiddler is connected to the same wifi as the phone
  2. Inside Fiddler, go to ‘Tools -> Options… In the Options window that pops up, select the Connections TAB and select ‘Allow remote Computers to connect’.

  1. Open ‘Settings -> WLAN -> WLAN Settings’ to enter the page as shown in the figure below

  1. Select ‘Manual’ for ‘proxy’, ‘Hostname’ for the computer’s hostname and the default port Fiddler listens on is 8888, then click the ‘check icon’ in the upper left corner to save
  2. Download the certificate: Open your mobile browser and type ‘http://192.168.1.1:8888’ (note: 192.168.1.1 should be replaced with your PC’s IP address). The following page will appear



Click the link in the red box to download the certificate

  1. Install the certificate: Open ‘Settings -> Password and Security -> System Security -> Encryption and Credentials -> Install Certificate (Install certificate from storage Device) -> Certificates’ to find the certificate you just downloaded and install it

  1. The installation can be viewed under ‘Encryption and Credentials -> Trusted Credentials’

  1. Now Fiddler can pick up requests sent by apps on the phone
  2. Note: after the test, you need to turn off the WLAN agent of the mobile phone, otherwise the mobile phone will not be able to access the network ~

One More Thing

Several commonly used shortcut keys

  • Double-click a request to open the Inspectors panel for the request
  • CTRL + X: Clear the request list
  • R: Select a request and press R to resend the request
  • Shift +delete: deletes all requests except the selected one