Fiddler is one of the most popular tools for inspecting HTTP traffic. This tool helps us test REST API/SOAP web requests very easily.
The subject’s question: What exactly can Fiddler do. If you think about it carefully, it actually has two meanings:
The first level: the scope of application of Fiddler tools.
The second level: how to use Fiddler tools.
In order to fully resolve these two levels of meaning, this article is divided into six chapters for introduction:
1. What can be done_Introduction to the principles of Fiddler
2. Using _Fiddler download and general configuration
3. Using _Fiddler Panel Introduction to the eleven corresponding functions and usages
4. Using _Fiddler's three common application scenarios and usage
5. Using _Fiddler Third-party extension
6. Summary + learning video recommendations
1. What can be done_Introduction to Fiddler principle:
To understand the application scope of Fiddler, you must first understand the principles of Fiddler.
1. Fiddler principle
In order to explain the principle clearly, let us take an example of browsing the Internet.
To put it simply, the browser accesses the Internet by sending the request data to the back-end server through the front-end browser, and then the server returns the response content to the front-end browser.
As a proxy, Fiddler actually means that the request data sent by the browser to the server is monitored and captured by Fiddler, and then Fiddler continues to send requests to the target server. When the server receives the request data and responds, the return value is sent to the browser by Fiddler and rendered, so that Fiddler acts as an "intermediate proxy" from the browser to the server .
2. Supplement: How to set up Fiddler to achieve the role of "intermediate agent"?
We have talked about the overall principle of Fiddler before, so why does it become our agent when we start it? And why can't FireFox or some other browsers catch the package? This requires us to have a deeper understanding of his agent function.
We said that when Fiddler is running on a system, it acts as a tiny Web proxy between the client application and the Web server. So how to see it?
In the Fiddler menu bar: Tools>Options>Connections Act as system proxy on startup is checked by default . This shows that when we enable Fiddler, it will start capturing traffic as our system proxy. By default, it runs on the local machine (127.0.0.1) port 8888.
Usually some browsers use the system proxy by default, so Fiddler acts as a proxy from the browser to the server after turning on this setting. For example: when we open chrome to view the browser proxy:
Check that the browser proxy is set to system, open the system proxy and compare it with Fiddler:
so:
When we open Fiddler, it will automatically act as a browser proxy tool without additional configuration.
If the package is not captured, you need to set the browser's proxy.
3. What can Fiddler do?
Through the above foreshadowing, the role of Fiddler is ready to come out. Fiddler is mainly an HTTP proxy tool located on the client and server side. It can record and check all http communications between the computer and the Internet, and supports setting breakpoints to view all data "in and out" of Fiddler (referring to cookies, html, js , css and other files). It is free and very powerful, and is a powerful tool for web and mobile debugging.
1) Fiddler can do the following:
- Monitor all browser HTTP/HTTPS traffic
- You can become familiar with the HTTP protocol through Fiddler
- View and analyze request content
- Faking client requests and server responses
- Test website performance
- Decrypting HTTPS web sessions |
- Global and local breakpoint functions
- Extend third-party plug-ins
2) Fiddler usage scenarios
Through the above analysis: we can conclude that Fiddler usage scenarios:
Interface debugging, interface testing, online environment debugging, Web performance analysis, front-end and back-end bug judgment, development environment Hosts configuration, Mock data, weak network disconnection test.
Now that we understand what Fiddler can do, let's look at how to use Fiddler.
2. Use_Fiddler download and general configuration
1. Fiddler free download
To download Fiddler Classic for free, use the link below:
https://www.telerik.com/download/fiddler
Self-check tips:
• This version only supports window systems, other systems are not supported
• Make sure we have downloaded Fiddler Classic and not Fiddler Everywhere or others.
• Fiddler is Telerik's third-party tool for logging, inspecting and changing HTTP traffic between a computer and a web server or server
2. Configure Fiddler Classic to decrypt HTTPS traffic
By default, Fiddler Classic does not capture and decrypt secure HTTPS traffic. To capture data sent over HTTPS, enable HTTPS traffic decryption.
1) Enable HTTPS traffic decryption
Click Tools, select Options, enter the https tab, and check Decrypt HTTPS CONNECTs .
Open Fiddler, click Tools—>Options in the toolbar, click Actions for HTTPS, and click the first item: Trust Root Certificate. At this time, the certificate FiddlerRoot.cer file will appear on the desktop. Click OK to set up successfully and close Fiddler.
2) Configure the Windows client to trust the Fiddler root certificate
a) Next to Trust Fiddler root certificate? Click Yes.
b) Keep saying yes until the pop-up window appears, and the certificate is successfully installed.
c) Restart fiddler to capture HTTPS packets
3. Connect to mobile phone
Open Fiddler, click Tools—>Options in the toolbar, and check Ignore server certificate errors (unsafe)
Hover the small globe with the mouse in the upper right corner to get the IP
Get the port number in Options>Connections , I use 8889 here
Open your phone and long press the currently connected wifi (note: keep your phone and the computer where fiddler is installed on the same wifi)
Click on the proxy, select manual, enter the IP and port number 8889 in the earth, and click on the upper right corner to confirm and save
Open the browser that comes with your phone and enter the ip:port number
Just install the FiddlerRoot.cer file. The installation method can be searched by yourself according to the ios and Android systems.
After successful installation, you can grab the mobile phone package.
The above are common configurations after first installation. Only after correctly configuring Fiddler can we use its large number of functions.
3. Use— Introduction to the eleven corresponding functions and usage of the Fiddler panel
After downloading, configuring, and connecting to the mobile phone, what functions does Fiddler have? Let’s introduce them one by one through the corresponding functions of the panel.
Panel 1, Fiddler toolbar:
That is the one marked in the red box at the top
The functions are: system connection, adding notes, playback, clear, run, stream, decode, save session, select to capture the monitored application, search, save, clear cache, text encoding and decoding tool .
Next, we introduce some commonly used buttons and their functions :
1)Add notes
Comments can be added to problematic requests
2) Replay request
Replay requests can be reinitiated for the request and are usually used in conjunction with breakpoints.
shift+r turns on Repeat Count to make multiple requests
3)Clear button
Remove all (shortcut Ctrl+x) can quickly clear all requests
You can also delete different categories according to your own needs.
4)Go button
It is usually used following breakpoints. When we interrupt the request, click Go to execute the next step.
Click Go to send the next request and get the response result.
5) Streaming mode
The same as the browser request method, the results are presented directly after requesting or responding from the server.
When this function is turned on, breakpoints and forged requests will not be possible. Usually keep the default of using cache mode.
6)Decode solves garbled characters
Just request again after the blue box appears.
7)Keep:All sessions: Save sessions (usually not clicked)
8)Any Process: Select to capture the monitored application
When we open multiple windows, various requests will flow in. At this time, by clicking Any Process and dragging it to the target window we want to capture , the next monitored requests will be sent from this window.
9)Find (Ctrl+f): Find files and color them
10)Save: Save all monitored requests in the current session window
11)Clear Cache: clear cache
12)TextWizard: Text encoding and decoding tool
If we need to encode the get request we can use this tool
Summary: The Fiddler toolbar provides us with some common operations.
Panel 2, Web Session List View Web session summary
The Web Session List consists of: ID number, response code, protocol, host name, content type, URL, body size, cache value, original process, remarks and custom columns. Next, we will introduce their respective meanings:
1) #: represents the request ID
Indicates the ID corresponding to each request, starting from 1 and increasing in the order of page requests. The later the request time, the greater the ID value. You can click the # position to modify the request display order;
2) Result: Response status code; a 3-digit number indicating the status of the server's response to the request:
1XX - Prompt message, the request was successfully received, this status code is uncommon
2XX - Success, the request was successfully processed, the most common 200
3XX - Redirect related, 304 means jumping to the cache page
4XX - Client errors are common 404
5XX——Common server-side errors 500
3) Protocol: Request protocol: The protocol used by the request, such as Http, Https, etc.
4) Host: Domain name of the requested address
5) URL: The specific path and file name of the requested server. The GET request also includes request parameters.
6) Body: the length of the response body
7) Cacheng: Requested cache expiration time or cache control header and other values
8) Content-Type: format of response content
application/json;charset=UTF-8——The response content is in Json format, encoded in UTF-8
text/html; charset=UTF-8——The response content is an HTML web page, encoded in UTF-8
application/javascript;charset= UTF-8 - the response content is a js file, encoded in UTF-8
image/jpeg - the response content is the picture
image/x-icon - the response content is the icon icon
text/css; charset=UTF-8 - the response content as css file and encoded in UTF-8
9) Process: monitored process
10) Comments: comments added to the request
Panel 3. Configuration column
To reorder a column, drag the column header left or right.
To resize a column, drag the edge of the column header.
Panel 4. Add custom columns
1) Use custom column menu.
Right click on the top of the column and select Customize Column
2) or use method 2
Ctrl+f search: static function Main
添加:FiddlerObject.UI.lvSessions.AddBoundColumn("ServerIP",120,"x-HostIP");
After saving and restarting Fiddler, view the last column of the session list
Panel 5, QuickExec command and bottom status bar
The QuickExec command is simple to use:
Commonly used as
1) bpu break point
Enter bpu http://baidu.com and press Enter
Any request containing http://baidu.com will be marked with a breakpoint.
2) Cancel breakpoint
Enter bpu and press Enter. After requesting Baidu again, it will return to normal without breakpoints.
3) ?sometext highlights a certain field
Enter? http://baidu.com and press Enter. Everything containing the word baidu will be highlighted.
More ways to play: Summon the help document: Enter help and press Enter to open the help document: Quick Exec help document
Panel 6, status bar
1) Capturing capture
Launch Fiddler exe and it will start capturing HTTP traffic.
Run Fiddler to start capturing web requests/responses made by various client applications on your system (e.g. Curl, Chrome, Internet Explorer). To start/stop capturing.
By default, when we run Fiddler, it behaves like the default proxy server on our system. However, not all web requests will appear in Fiddler unless the client application uses the system default proxy.
2）All Processes
All processes, browser processes, non-browser processes, all hidden
3) Quick break point
First click: breakpoint before request
The second click is: the endpoint after the response
Click a third time to close.
Panel 7. Request and response parsing function on the right (must know)
The right side usually parses the requests and responses in the Session List on the left and analyzes them. We will introduce their functions respectively:
1) Statistics
3) How to view requests and responses
Choose corresponding tags according to different scenarios
TextView
SyntaxView
ImageView
WebView
Auth
Caching
Panel 8, AutoRespnder automatic responder (must know)
The main function of AutoResponder: It allows us to set conditions so that fiddler can directly return our predetermined response content for a specific request, instead of forwarding the response content after requesting it from the original server.
• Redirect to local resources
• Use Fiddler’s built-in responses
• Custom responses
Here are some practical cases to experience the usage of AutoRespnder :
1) AutoRespnder case: Baidu replaced the local Fiddler picture
https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png
Replace with local image:
Add rules:
Edit the target address, replace the file address, and check the effective rules
Clear the browser cache and visit https://www.baidu.com/ again
2) Import the matching rule set
a Click the Import button.
b Select .saz or .farx file
From Windows Explorer:
Choose a .saz or .farx file.
Drag and drop the selected files from Windows Explorer to the "AutoResponder" tab.
3) Mock data of AutoRespnder
Simulate backend server interface data return
After opening it with a notebook, replace the href+= content with the content we need: the username or password is incorrect, please re-enter or retrieve the password.
Save the edited response document after modification.
Resend the request to view the response information. The response result is already what we need.
Panel 9, Composer designer (must know)
The function of Fiddler's Composer is to create an HTTP Request and then send the request. You can create a new request manually or drag and drop an existing request in the session table. Used to inspect and analyze requests and responses, and to quickly retrieve and receive data.
1) Mode
Composer has two modes. In Parsed mode, we can use these boxes to build HTTP(S) requests. In Raw mode, we must enter the properly formatted HTTP request ourselves. Usually using Parsed is what we want.
2) Options
a. The Options tab displays options that allow us to customize the behavior of Composer.
b. Inspect Session Select the new session and activate the Inspectors tab when making the request.
c. Fix Content-Length Header adjusts the value of the Content-Length request header (if present) to match the size of the request body.
d. If possible, Follow Redirects will cause HTTP/3xx redirects to trigger new requests. Composer will follow fiddler.composer.followredirects.max default redirects.
e. Automatically Authenticate causes Fiddler Classic to automatically respond to HTTP/401 and HTTP/407 challenges using NTLM or the negotiated protocol using the current user's Windows credentials.
3) There are two ways for Fiddler to create a Request
• You can write a Request by hand.
• Or drag an existing Request in the Web sessions list.
4) Resend the session from Composer
step1. In the Composer tab, click the Scratchpad tab.
step2. Click and drag one or more sessions from the session list.
step3: Double-click the session content in Scratchpad to select the entire session content.
step4. Click Execute to reissue the request.
The function of Composer is the same as that of Inspectors, which is to tamper with data, but Composer can tamper with the data in Cookie. In other words, what Inspectors tamper with is the data we enter, such as the password we enter. What Composer tampered with is the processed
Panel 10, Timline View a waterfall chart of the transmission timeline of one or more web sessions:
1. Select one or more Web sessions in the Web session list. Ctrl-click to select multiple sessions.
2. Click the Timeline tab.
Panel 11, Filter (required)
Main filter requests
Filter the host and click Execute after filtering.
Filter fields included in requests
Usually when setting up a test swim lane in a test environment, you need to add a swim lane identifier to the request header. We can use Set request header.
The request will hit the swim lane we need to test and test it in the test environment.
4. Use_Fiddler’s three common application scenarios and usage
Scenario 1. Breakpoint application (must know)
1) Global breakpoint usage:
Breakpoint before request: Breakpoint before sending the request to the server (can be used to simulate timeout)
Post-response breakpoint: the response came back but was not sent to the client
Pre-request breakpoints can tamper with requests and responses:
We can edit the request we want to send in the WebForm
At the same time, we can choose the response results we need.
Modify the value of message to success. At this time, our response results are as shown below:
Tampering with the response: Of course, we can also cut off the power after the response and modify the response result on the raw
Breakpoint application scenarios:
Can be used to test some extremely abnormal scenarios.
- When we debug on the front end, we intercept the interface results and send the exception value to the server.
- When the interrupt point is not sent after the response, the response is not sent to the client to simulate the scenario of network disconnection and request timeout.
2) Local breakpoint method
Enter bpu xxx (any character) in QuickExec to request a pre-request breakpoint such as:
Press Enter and check if the RequestURI breakpoint for baidu appears below, which means that the field interception is effective. Only set breakpoints before requests containing baidu
Anything with the word baidu will have a breakpoint:
Input: bpafter baidu can be intercepted after the response, and only put a breakpoint after the response containing baidu. Enter bpafter and press Enter to cancel
Scenario 2. Simulate weak network test
Simulate network speed limit: Rules>Performance>Simulate Modem Speeds After checking, the default network speed limit is
The weak network is implemented through scripts. We can open Rule>select Customize Rules...
After entering the script, Ctrl+f enter: m_simulateModem
A request of 1kb has a delay of 300 milliseconds, and a response of 1kb has a delay of 150 milliseconds. Modify here to adjust the weak network time.
• oSession[" request-trickle-delay "] = "300"; The comment is very clear, Delay sends by 300ms per KB uploaded. It takes 300ms to upload 1KB. Convert the upload speed: 1Kb/0.3s = 10/3(KB/ s)
• The algorithm is 1000/download speed = required delay time (milliseconds). If it is 50kB/s, it will require a delay of 20 milliseconds to receive data, so modify the above value according to the network speed you need.
Scenario 3, Visual Studio WebTest
The ability to capture web traffic (including AJAX requests) for later playback using Visual Studio Web Testing.
SaveWebTest
1. Capture traffic from our web application.
2. Click File > Export Sessions > All Sessions.
3. Click Visual Studio WebTest.
ReplayWebTest
• NOTE: We must have Visual Studio 2005 or higher version of Team System product installed to load the .WebTest file.
To replay WebTest:
1. Click File > New Project.
2. Expand Visual C# or Visual Basic.
3. Click the test node.
5. Use _Fiddler third-party extension
Fiddler also provides us with different third-party plug-ins for everyone to download and learn to use.
Link: https://www.telerik.com/Fiddler/add-ons
6. Summary:
The following are the capabilities Fiddler can provide us:
• The original trusted and secure (free) debugging proxy server tool for Windows.
• Successfully log, inspect and alter HTTP(s) network requests and server responses.
• Find and fix errors in a short amount of time.
• Easily import/export requests in various formats and eliminate guesswork.
• Write custom scripts to speed up troubleshooting.
• Quickly debug and develop web communications code faster, giving us more time to work on other tasks.
Summarize
If you have any questions about this article, if you also need practical experience in interface projects, if you are interested in software testing, interface testing, automated testing, and interview experience exchange, please join us. The joining method is at the end of the article.
To teach yourself how to capture packets with fiddler in 2023, please be sure to watch the most detailed video tutorial on the Internet [How to Learn to Capture Packets with Fiddler in 1 Day]! ! _bilibili_bilibili
Summarize:
Optical theory is useless. You must learn to follow along and practice it in order to apply what you have learned to practice. At this time, you can learn from some practical cases.
If it is helpful to you, please like and save it to give the author an encouragement. It also makes it easier for you to search quickly next time.
If you don’t understand, please consult the small card below. The blogger also hopes to learn and improve with like-minded testers.
At the appropriate age, choose the appropriate position and try to give full play to your own advantages.
My path to automated test development is inseparable from plans at each stage, because I like planning and summarizing.
Test development video tutorials and study notes collection portal! !
