Use fiddler to improve front-end productivity (case)

In the previous article (introduction), we had a simple contact with fidhttp://www.aliyun.com/zixun/aggregation/16504.html ">dler Web Debugger". Perhaps you have started to use fiddler for HTTP-related debugging, in this one, we will learn from an example of Fiddler magic.

In the day-to-day work of our front-end development, found that a css/javascript file on the server problem, need to modify, it is a commonplace. Typically, we need to modify the file and then republish it, which can easily affect the stability of the production environment. More generally, we modify the file and validate it in the development environment, and then publish it to the production environment. Although safe, but more cumbersome. With Fiddler's features that can modify HTTP data, we are very agile to "modify-validate-publish" based on the production environment.

Suppose we find a problem with this page, we need to modify the referenced JS file (http://www.aliued.cn/wp-includes/js/comment-reply.js?ver=20090102).

First step: Use Fiddler to view the page's data flow list, find this JS file session

Tip: It is best to have no cached return content (result code is 200) so that you can save the next step. It doesn't matter if you're not 200, you just have to have this file on your local hard drive.

Second step: Save the JS file to the local (if you already have this file locally, you can skip this step)

In this JS session right click, select "Save–response–response body ...", the contents of the JS file saved to the local. Remember the location, and we'll use this saved file below.

Step three: Open Fiddler request automatic redirection function

Open the Autoresponder tab setting. Do you see a two check box on the interface? The first is to turn on or disable automatic redirection, and we can add redirection rules below. When the second check box is on the hook, it does not affect requests that do not meet the conditions we are dealing with.

Step Fourth: Create redirection rules to redirect HTTP requests for this JS to local files

We can add the rules manually through the "Add ..." button, but this URL is already in our session list and can be dragged directly over. In the list of sessions on the left, select the session you found in the first step and drag it to the Autoresponse tab. This creates a rule for this URL.

The rules that fiddler helped us generate are:

when the URL is: http://www.aliued.cn/wp-includes/js/comment-reply.js?ver=20090102 returns 200 and uses exactly the same content as session 4 to return

We need to revise this rule,

Select "Find a File ..." To select a local file as the body content returned.

Select the file we just saved.

Refresh the browser page, look at the session list, if like this, this session of the background is gray, so congratulations, you have successfully redirected this request to the local file!

Tip: If the browser is using Firefox, remember to first clear the temporary file cache, because Firefox is the real cache, when the judge file's cache has not expired, it will not send a request, Fiddler can not get.

Step Fifth: Modify the local file for testing

We add an alert (' Hello ') to the local JS file

Refresh the browser, see the effect, if alert out, then success.

After continuing to modify the file and test it, we will be able to post the modified file after the problem has been successfully repaired.

Summary: Automatic redirection is the most practical feature of Fiddler, where rule can be set freely, using search (default), exact match (EXACT), regular expression matching (REGEX). The processing method can choose to use the file, also can choose the appropriate time to pause the data stream (*bpu, *bpafter), manual intervention. With the above steps, we demonstrated how to redirect HTTP requests to local files for Web debugging. This debugging way does not need to publish to the line to verify, avoids the modification not to be successful, affects the user the risk, moreover does not need to build the complex development server and so on development environment, is very suitable for the fast Web debugging.

Extended reading:

fiddler use Help Source: http://www.aliued.cn/?p=2581