Web debugger fiddler usage Summary

 

During Internal sharing, I summarized the use of Fiddler. I always wanted to write a fiddler article. I searched for it and found that there was a masterpiece introduced in the garden: fiddler tutorial, but in summary, if there are similarities, please forgive me, haha. What is Fiddler? I believe everyone knows it clearly. In plain words, it is a packet capture tool. Next we will discuss what it is and what it can do based on actual functions?

 

Working Principle

First, the previous Graph

This figure clearly shows the position of fiddler in the request, and we can determine what it can do.

It actually works on the local port 8888 HTTP proxy. When we start Fiddler, it will automatically change the proxy settings:

 

From this we can see that as long as it is an HTTP request, it will pass through fiddler before the request is initiated to exit the local machine. When the Response Returns and does not reach the actual requestor, it will also pass through fiddler: in this way, we can easily modify the request and response content, so that we can easily debug the current network program.

 

Differences from other tools

Firebug, ie, and chrome Developer Tools: these are powerful front-end development tools. They listen to browser requests and responses to browsers, and display request data and response data, this fiddler has the same basic functions, but it only listens, only records the request and response data, while fiddler completely takes over the request and response. In addition, the HTML and CSS content presented to the browser can be dynamically modified, making page makers feel like a new parent. The powerful JS debugging function is a good news for front-end developers, these two points are not available in Fiddler.

Wireshark is more abnormal. It seems that the network card is monitored, and all data passing through the network card will be recorded.

The following describes the powerful functions of Fiddler.

 

One of the powerful functions of Fiddler

Before the official start, we will not introduce the basic interface of Fiddler. You can refer to the articles recommended at the beginning.

In the command input area, enter help and press enter to open a page. This page details all the commands of Fiddler, including the breakpoint commands:BPU is interrupted at the beginning of the request. bpafter is interrupted when the response arrives, BPS is interrupted when the HTTP status code is specified, and BPV/BPM is interrupted when the request method is specified..

In addition, on the menu bar:

You can also set breakpoints, but this will not be practical for all requests.

 

The following uses BPU as an example to describe the breakpoint function:

1. Take Baidu as an example to open the Baidu Homepage

2. Enter BPU www.baidu.com In the fiddler command input area to interrupt the request containing this address in the URL.

3. Enter Fiddler on the opened Baidu page and click search.

4. At this time, we will see

Double-click a session starting with a red icon.

5. view the right panel

 

6. When a breakpoint request is not sent, the upper part of the request is the request data content. When it is switched to webforms, we can see more intuitive data request data:

 

Here we can see that both the WD and OQ parameters are our input keywords Fiddler, which can be modified. Yes, they can be modified, and all are changed to fiddler2. The request data, other post data, and even Cookie, Referer, and User-Agent in headers can be modified.

7. view

Two buttons and one drop-down selection box: Break on response. Click this button to initiate a request and interrupt the response data when it returns to Fiddler. Run to complete and click it to process the response, the request will not be interrupted.

Open the drop-down box:

There are a lot of operation options here, that is, selecting the output content. After the selection, the actual response data will replace these operations, especially the last find a file: this can interrupt an image, select a local image here, so that we can replace the image on the page. A relatively powerful scenario is that, for example, the current net JS has a problem, but the current net JS is compressed and cannot be debugged in firebug, in this way, we can map it to a local original version, so that firebug will get an original Js for convenient debugging. You can experiment with this function on your own.

8. Click break on response. Then there is content in the lower part of the right panel, that is, the response content. Fiddler is interrupted again. The response content has been returned to the local machine, but it is still on the fiddler proxy, the browser is not yet available.

 

Switch to webview:

 

We can see that our keyword has changed to fiddler2, and the result returned is the result of fiddler2.

Switch to the textview panel, and we can see the returned HTML content. Right, here, we can modify the response content again. For example, we can add some content to the Title Tag.

Of course, we know that firebug tools cannot modify Js. We can use Fiddler to interrupt the JS file we want to modify, and then modify some code here, then, you can use firebug to debug the current network code perfectly.

9. Check the operation area in the middle of the right panel,

 

In this case, you can select a specific response content from the drop-down list to replace the server response.

10. Click Run to complete.

View the browser tag area:

The modified content.

 

In addition, if you enter go in the command line, all the interruptions will be executed intermittently. If you input BPU again, all breakpoints will be cleared.

 

Powerful fiddler Feature 2 autoresponder

In this panel, this function is about the same as the choose response function described above. It is used to obtain the specified data for some matching requests, rather than the real data returned by the server.

However, this Panel determines that after the established rules are enabled, the specified response content will be used for each matching, which is more convenient than specifying the content for each interruption.

We can drag a session directly from the left-side session Panel to this Panel. For example, we drag the record of Baidu from the left-side panel to this Panel and see the editing area below.

 

In the second row, select 404_plain.dat and click Save.

The Panel contains

 

Such a record.

Refresh the Baidu and you will get

 

In this way, we can return a local JS data for a request, such as a JS request, in combination with the front-end of the firebug perfect debugging page.

If you do not want to use it, go to the check box on this panel or remove the check box on a rule.

 

Fiddler powerful function 3 Request Constructor

 

The idea is to construct the request and click execute to initiate the request.

We can manually specify the request content. Similarly, we can drag a session from the session Panel to this Panel. At this time, the panel displays all the data of the Request initiated by this session, in this way, we can modify the data and click execute to initiate a request.

 

Powerful fiddler-4 custom scripts

By modifying the script file, we can add our own special processing to the logic of Fiddler.

We can

Call up the script to modify it. You can also

Directly modify this panel.

The majority. net, I'm glad that Fiddler itself is written in C #. With more detailed annotations, this script file is easy for us to get started.

 

Fiddler powerful function 5 Performance Testing

Select one or more sessions from the session List and view the Statistics Panel on the right:

 

In this panel, we can see the time at each stage of these requests, the amount of data sent and received, and an assessment of the access to these requests in different parts of the world.

There is also a show Chat link at the bottom. We can see an intuitive graph of various types of data in the total data.

In addition to these statistics, we can also view the request content in the session List to check whether the browser cache and cache time are used.

You can also

 

Check the two items to display the session response end time. you can disable or enable browser cache in the second and last items of the menu.

Check the simulated network speed in the first option of this menu. After selecting this option, find it in the Custom Script:

        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";         }

 

They are: 150 ms for each 1 KB data upload and MS for each 1kb data download. We can modify these values to simulate the network speed.

 

In addition, we select a session, and then on the right side

 

To check whether gzip compression is enabled for these requests, and then select the size of each compressed byte to intuitively see how much data traffic can be saved after compression is enabled.

 

Powerful functions of Fiddler 6 powerful commands

I will not introduce it here. In the command input area, enter help and press enter to open the page, which is quite comprehensive and really powerful.

 

Seven filters with powerful fiddler Functions

Sometimes you can open Fiddler to capture this page, but the data of other requests will also be recorded, and then search for it. In this case, enable the filter.

 

After enabling the tool, you can add conditions according to your own will. However, we will not introduce the conditions here. Instead, we will give you a simpler tool:

Toolbar

 

This tool, we hold the button with the mouse, and drag it to the tab of the browser we want to crawl, and then release it, you will see

In this way, the fiddler will only capture the request of the process. This button can also be dragged to any other program or even the desktop:

However, Explorer does not seem to initiate HTTP requests.

 

In addition to these main functions, the fiddler toolbar provides some very useful functions, such as the delete button, you can choose to delete specific content; keep: All sessions button, you can select how many sessions are saved on the session Panel, such as searching and clearing the cache. The last two operations are quite interesting:

1.

It automatically decodes the encoded data, facilitating reading.

2. There is a tool on the far right of the toolbar.

Click to bring up a small tool: We can perform various forms of encoding and decoding.

3. Bottom Status Bar

Click one on the left to stop fiddler from capturing packets. You can view the packet through the IE agent. In fact, the proxy settings are cleared, and then click it to start packet capture again; the button on the right allows Fiddler to capture HTTP requests initiated by the browser or other programs.

 

You may also find other powerful functions of Fiddler. Needless to say, Fiddler is definitely a powerful tool for front-end development. Cooperation with the developer tool firebug can solve many problems in front-end development.