Front-section technology, fiddler tool application Introduction

What is the purpose of writing this article:

1. I like reading books, JavaScript related books have seen some of the books can always see the same comments on JavaScript or evaluation- "JavaScript debugging difficult." But the fact is that with the rapid development of the Internet industry, JavaScript debugging difficult problem is not as troublesome as in the early years, here do not say a variety of IDE to JavaScript strong support, just because the work needs to debug products in the mainstream browser compatibility issues, so take the opportunity to do some homework To introduce the tools that are unusually power-giving during the front-end development process.

2. The first time has introduced a software for the purpose of writing articles, I hope you can have a harvest after reading the article. And in the end this is also a tool, if you have more useful debugging tools are also welcome to promote, we are good is really good, haha.

3. The tool has been in use for almost two years, and it really helps in actual work, so although there are articles about this tool, it is decided to write an article to let more friends understand the tool.

4. This month is a brand new start for me, a fresh life, a new job, a new environment ... Last month there were too many things, good things, bad things, feeling all very long, but after insisting on the determination of their own efforts to strengthen themselves is the hard truth.

5. The first part of the article describes the specific details of the tool, the following section describes the use of tools and specific methods, for individual needs to choose to read.

6. Welcome reprint, but please indicate the source, thank you.

What's fiddler?

Baidu Encyclopedia is introduced in this way-"Fiddler is a Web debugging agent." It can record HTTP requests between all clients and servers, allow you to monitor, set breakpoints, and even modify input and output data, Fiddler contains a powerful event-based scripting subsystem, and is able to use the. NET Framework language extension. ”

So no matter what you are engaged in developing, which language, as long as you want to understand HTTP, this tool is worth your understanding, and more importantly, this tool is free.

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

after starting the fiddler, the The network traffic that occurs is relayed through fiddler, and you can see the information of the HTTP/HTTPS data stream, which we can analyze by analyzing it. Fiddler also provides a range of tools to clear IE caches, request constructors, text conversion tools, and more, which is valuable for front-end development work.

　　

Installation and download of Fiddler:

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

If you are an early XP version of the system during installation, you will be prompted to download the. NET Framework version 2.0 or later. The installation process is simple and is not introduced.


Fiddler usage interface and function Description:

Monitor switch-only two states, use the time is open, do not let ya rest. Capturing indicates snapping state

Listening type-four states to listen for all requests, listen for browser requests, listen for non-browser requests, and hide all

Command line-do not introduce, the difficult person will not, will not be difficult. I belong to the former, tragedy ...

Request List-The information for the request list has results (result), Protocol (PROTOCOL), hostname (host), Web address (URL), content size (Body), Cache (Caching), Response HTTP content type (content-type), Request Run Program (process), note (Comments), custom

Request Information-Right This blockbuster is a viewer for information about the data flow, which provides many viewing forms to view the contents of the data flow.

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

Fiddler request related information corresponding to the main function :

At the very right of the tool is the viewer that requests the relevant information, which provides a view of the data in many ways. Want to know? Look at the picture.

Statistics information (Statistics)

　　

Powerful Checker (inspectors)-features a lot, waiting for you to dig slowly.

　　

　　

Time Axis (Timeline)

　　

Auto-reply (autoresponder)-a few examples of how to use it

　　

　　tell me why I use fiddler at work and how to use fiddler.

front-end engineers in the work there will always be some requirements, the code required to write a good compatibility, the need to consider the high-performance code, the requirements of the method to object-oriented, requirements ... Front-end engineers are always compatible with browsers and have a lot to say.

Condition 1: In the work developed by our front-end engineers, we want to debug a html/css/javascript file on the server. In general, we will modify the file directly, and then re-release to do the verification, which will easily affect the test environment or the stability of the build environment. Better yet, we can directly modify the file and verify it in the local development environment, and then publish it to the test environment, which will ensure the stability of the test environment, but it is more cumbersome.

Condition 2: Now my situation is that I need to debug the browser compatibility issue of the on-line product, and I have no local environment or build environment to test. If there is a bug in Firefox or Chrome that has console-supported debugging browser everything is say, but if the bug only happened in the travel, TT, the window of the world, Sogou ... This kind of browser without debugging, and you also met my current situation, then if not fiddler this tool, can only say that this is a disaster.

The Fiddler tool modifies the characteristics of the HTTP data, and we make it easy to modify and validate it based on the production environment, and then release it.

the first step is to locate the debug file and download it first. If you find a file in the page has a problem (html/css/javascript), then we need to do is to download it to local (if there is local local so you can skip this step), downloaded to the local file occasionally garbled situation, We recommend that you first clean up the browser cache or adjust the registry (Fiddler2 Chinese garbled problem). Details of use are as follows:

　　

The second step, fiddler-autoresponder appearance, turn on this function. Open the Autoresponder label settings. You can see that there are three selection boxes on the interface, the first is to turn on or off the automatic redirection function, we can add the redirection rule below, the second box is ticked, the mismatch request can pass, and does not affect those requests that do not meet our processing conditions.

　　

　The third step is to create a redirect rule that redirects the HTTP request for this JS to a local file. Select the file you just located, add the rule via the "Add ..." button, or drag it directly over.

　　

Fourth, select the file you just saved or replace the file, as a replacement for the content of this request.

　　

The fifth step, you debug or not debug, it is there-will only ask for your local selection of the file. So, you can do whatever you want to change. Refresh the page and you'll see the alert.

　　

Front-section technology, fiddler tool application Introduction