Shulou(Shulou.com)06/02 Report--

The main content of this article is to explain "what is Fiddler". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn what Fiddler is.

What is Fiddler?

Baidu encyclopedia describes it like this-"Fiddler is a web debugging agent. It can record all http requests between the client and the server, allowing you to monitor, set breakpoints, and even modify input and output data. Fiddler includes a powerful subsystem based on event scripts and can be extended using the. Net framework language."

So no matter what kind of development or language you are working on, as long as you want to know HTTP, this tool is worth learning, and more importantly, it is free.

Fiddler is to monitor the network data flow of the system in the way of proxy server.

After starting Fiddler, the network data flow is transferred through Fiddler, and the information of HTTP/HTTPS data flow can be seen, and we can analyze these information. Fiddler also provides a series of tools to clear the IE cache, request constructor, text conversion tools, and so on, which are valuable for front-end development work.

Installation and download of Fiddler:

Fiddler download address: http://www.fiddler2.com/fiddler2/

If you are an earlier version of XP, you will be prompted to download. Net framework 2.0 or above during installation. The installation process is very simple, so let's not introduce it.

Introduction to the user interface and features of Fiddler:

Monitor switch-there are only two states, turn it on when you use it, and let him rest when you don't need it. Capturing indicates capture statu

Monitoring type-four states correspond to listening for all requests; listening for browser requests, listening for non-browser requests, and Hide All for all

Command line-there will be no introduction, those who are difficult will not, those who will meet will not be difficult. I belong to the former, tragedy.

Request list-the information of the request list includes result (Result), protocol (Protocol), hostname (Host), web address (URL), content size (Body), cache (Caching), HTTP content type of response (Content-Type), program run by the request (Process), comment (Comments), customization (Custom)

Request for relevant information-the large area on the right is a viewer of information about the data stream, which provides many forms of viewing to view the contents of the data stream.

The icon of the Fiddler request list corresponds to the specific data type and status, which means:

The main functions corresponding to Fiddler request related information:

On the far right of the tool is the viewer that requests relevant information, which provides a wide range of ways to view data. Want to know? Look at the picture.

Statistics Information (Statistics)

Powerful inspector (Inspectors)-with many features, waiting for you to dig slowly.

Timeline (Timeline)

Automatic Responder (autoResponder)-I will introduce how to use it in a moment.

Tell me why I use Fiddler at work and how to use Fiddler.

Front-end engineers always have some requirements in their work, such as excellent compatibility of the written code, high performance of the code, object-oriented methods and methods. Front-end engineers are always compatible with browsers. There's a lot to say.

Condition 1: in the work developed by our front-end engineer, we need to debug a HTML/CSS/JavaScript file on the server. In general, we modify the file directly, then reissue it and then verify it, which can easily affect the stability of the test environment or build environment. Even better, we modify the file directly in the local development environment and verify it, and then publish it to the test environment, which ensures the stability of the test environment, but it is more tedious.

Condition 2: now my situation is that I need to debug the browser compatibility issues of the online product, and I don't have a local environment or build environment to test. If Bug happens in a browser with console support for debugging like Firefox or Chrome, everything is fine, but if bug only happens in roaming, TT, window of the World, Sogou. Under this kind of browser without debugging function, and you have encountered my current situation, then if there is no such tool as Fiddler, it would be a disaster.

The Fiddler tool can modify the characteristics of HTTP data, so it is very convenient for us to modify and verify it based on the production environment, and then release it after confirmation.

* * step, first locate the debug file and download it. Suppose there is a problem with a file on the page (HTML/CSS/JavaScript is all right), then what we need to do is to download it locally (if there is a local file then we can skip this step), downloading to the local file will occasionally have garbled, it is recommended that you first clean the browser cache or adjust the registry (Fiddler2 Chinese garbled problem). The details of use are as follows:

In the second step, Fiddler-autoResponder comes out and enables this function. Open the AutoResponder tag settings. You can see that there are three selection boxes on the interface. The function of * is to enable or disable automatic redirection, so we can add redirection rules below. When the second selection box is checked, mismatched requests can be passed without affecting those requests that do not meet our processing conditions.

The third step is to create a redirect rule that redirects HTTP requests targeting this js to the local file. Select the file you just located and pass "Add …" Button to add rules, you can also drag directly over.

Step 4, select the file that has just been saved locally or the replacement file as the content of the replacement request.

Step 5, if you debug or not debug, it's right there-only the file you selected locally will be requested. So, you can modify it as much as you want. Refresh the page and you will see the alert.

At this point, I believe you have a deeper understanding of "what Fiddler is", might as well come to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.