Web Debugger Fiddler Usage Summary

Ext.: http://www.cnblogs.com/forcertain/archive/2012/11/29/2795139.html

Internal sharing summed up the use of Fiddler, always want to write a Fiddler article, wrote before the search, found that the garden has introduced the masterpiece: Fiddler tutorial, but still summed up, if there is the same, please forgive me, haha. Fiddler is what believe everyone is very clear, with the phrase is to grab the bag tool, the following we from the actual function of what it is, what can do?

Working principle

First, last picture.

At a glance, we can see where the Fiddler is in the request, and we can determine what it is capable of.

It actually works on the native 8888 port HTTP proxy, and when we start Fiddler, it automatically changes the proxy settings:

From then on we can see, as long as the request is HTTP, before the request to leave the machine will go through fiddler, when response back, did not reach the actual requestor, will also go through fiddler: so we can easily implement the content of the modification request and response, So that we can easily debug the current network of the program.

The difference from other tools

Firebug, IE and Chrome's own developer tools: This is the front-end development of the tool, they listen to browser-initiated requests and responses to the browser, display the request data and response data, the Fiddler basic function is consistent, but it is only listening, only the request and response data records, And fiddler completely took over the request and the response. In addition, to render to the browser HTML, CSS content to implement dynamic changes to page production staff is almost like Bernadette feeling; powerful JS debugging function, front-end developers of the gospel Ah, these two points are not fiddler.

Wireshark more abnormal, seemingly monitor the network card, all the data through the network card will be recorded.

Let's talk about the powerful features of fiddler.

Fiddler one of the powerful features breakpoints

Before the formal start, we will not introduce the basic interface of Fiddler, can look at the beginning of the recommended article.

We enter help in the command input area, carriage return opens a page that details all of Fiddler's commands, including commands about breakpoints: Bpu interrupts at thestart of the request, Bpafter interrupts when the response arrives, and BPS breaks on a specific HTTP status code, BPV The/bpm is interrupted on a specific request method .

In addition, in the menu bar:

You can also set breakpoints, but this will be less useful for all requests.

Let's take bpu, for example, the breakpoint function:

1, Baidu as an example, open the homepage of Baidu

2, enter Bpu www.baidu.com in the Fiddler command input area to interrupt the request that contains this address in the URL

3, then in just open the Baidu page input fiddler click Search

4, we will see the Fidller session panel at this time

A session with a small red icon at the beginning, double-click.

5. View Right panel

6, this in the breakpoint when the request is not issued, the top half is the requested data content, cut to WebForms we can see more intuitive data request data:

Here we can see the WD and OQ parameters are our input keyword fiddler, can be modified, yes can be modified, all changed to Fiddler2. This is only implemented to modify the request data, the other post data, even headers in the cookie, referer, user-agent, etc. can be modified.

7, look at the middle of the panel

Two buttons and a drop-down selection box: Break on response, click this button, will be sent in the request, the response data back to fiddler again interrupt, run to complete, click will be normal processing, no longer interrupt the request.

Open the drop-down selection box:

There are a lot of operation options, that is, choose the output, after the selection, the actual response data will be replaced by these operations, especially the last find a file: This we can break a picture, and then here to choose a local image, so we can replace the page image. More powerful scene is such as the current network JS out of the problem, but the general network JS is compressed, in the firebug can not be debugged, so we could map it to a local original version, so that Firebug will get a copy of the original JS, you can easily debug. Let's do the experiment by ourselves.

8, click on Response, then in the right panel under the content, that is, the response content, Fiddler again interrupted, the response content has been back to the machine, but also in the Fiddler agent here, not to the browser.

Cut to WebView:

We can see that our keywords have become fiddler2 and return is Fiddler2 search results.

Cut to the TextView panel, we can see the returned HTML content, yes, here we can modify the content of the response again, for example we find the title tag plus some content.

Of course, not only these, we know firebug these tools can not modify JS, we use Fiddler to break the JS file we want to modify, and then modify some of the code here, and then with the help of Firebug can be perfect debugging the current network code.

9, look at the middle of the right panel operation area,

At this point, we can still choose a specific response content from the drop-down to replace the server's response.

10, click Run to complete.

Now look at the browser tab area:

It's something we've changed.

Also: command line input Go will intermittently perform all interrupts, and re-entering BPU will clear all breakpoints.

Fiddler powerful function of the second autoresponder

This panel, this function and the above we introduced the Choose Response function is probably the same, is for some matching requests, let the requester get the data we specify, not the actual data returned by the server.

However, after this Panel determines that the established rules are enabled, each match will use the specified response content, which is easier to specify than the top of each interrupt.

We can simply drag the conversation directly from the left-hand session panel to this panel, for example, by dragging Baidu's record directly from the left panel to this panel and looking at the editing area below

Then, in the second line, select 404_plain.dat and click Save.

The panel will have

Such a record.

Again to refresh Baidu, will get

In this way, we can be a request, such as JS request, to return a local JS data, in conjunction with Firebug perfect debugging page front end.

If you don't want to use it, go straight to the top of the panel, or remove the tick on a rule.

Fiddler three request constructors for powerful functions

As implies, is to construct the request, and then click the Execute button to initiate the request.

We can manually specify the individual content of the request, and we can drag a session from the Conversation Panel to this panel, where the panel displays all the data that the session initiated, so that we can modify the data on this basis and then click the Execute button to initiate a request.

Fiddler four custom scripts for powerful features

By modifying the script file, we can add our own special handling on top of the logic of Fiddler itself.

We can

Bring up the script for modification, or you can

Modify it directly on this panel.

To the vast number of. NET classmates happy is, fiddler itself is written in C #, plus more detailed comments, this script file for us is relatively easy to get started, specific to experience it.

Fiddler five performance test of powerful function

We select one or more sessions from the conversation list and then view the right statistics panel:

In this panel, we can see the time of each phase of these requests, the amount of data sent and received, and an assessment of how these requests will be accessed in different parts of the world.

At the bottom there is a link to show chat where we can see an intuitive graph of all kinds of data in total data.

In addition to these statistics, we can also view the session list to see if the content of our request does the browser cache and cache time.

In the menu, you can also

Tick these two to show the end time of the session response, while the second and last item in the menu we can disable or always enable the browser's cache.

See the first item in this menu for the analog speed, when we tick the item, and then find it in the custom script:

123456

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: Pause 300ms per upload of 1KB data and pause 150ms for each 1KB data download, we can modify these values to achieve the effect of simulating speed.

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

To see if these requests are enabled for GZIP compression, and then choose the size of each compressed byte to visually see how much data we can save after we enable compression.

Six powerful commands for fiddler powerful features

Here is not introduced, in the command input area, input help, enter the page after the introduction of the very full, really very powerful.

Fiddler seven filters for powerful functions

You can sometimes open fiddler to crawl this page, but other requests will be recorded, and then hard to find, then enable the filter bar.

When enabled, you can add conditions according to your own will, but this is not an introduction, but a simpler tool for everyone:

On the toolbar

This tool, we mouse over this button, and then drag to the Browser tab we want to crawl, and then release, you will see

Such an effect so that Fiddler will only crawl requests for that process. This button can also be dragged to any other program or even on the desktop:

But the Explorer does not seem to initiate HTTP requests, hehe.

In addition to these key features, Fiddler's toolbar provides some very useful other functions, such as the Delete button, you can choose to delete a specific content, Keep:all sessions button, you can choose the session panel to save only how many sessions, find, clean up the cache and other operations, Finally, two comparisons are quite interesting:

1, the tool bar

Point, it will automatically decode those encoded data to facilitate reading.

2, there's a tool on the right side of the toolbar.

Click, pop up a gadget: Let's encode and decode in various forms.

3, the bottom status bar

One click on the left, you can let fiddler no longer grab the package, through the IE agent can be viewed, in fact, clear the proxy settings, and then click on it can start to grab the bag again, the right button we can decide to let fiddler Crawl browser initiated or other program initiated HTTP request.

Looking carefully, you may also find fiddler other powerful features. Needless to say, Fiddler is definitely the front-end development of the tool, developer tools, such as firebug can solve a lot of front-end development of many problems.

Web Debugger Fiddler Usage Summary