Front-end development tools-fiddle

1.Fiddler relative to other debugging tools advantages

HttpWatch and Firebug are familiar to most front-end developers, but HttpWatch can capture all the data from each HTTP request, but cannot modify the returned data, although Firebug can modify HTML and CSS. However, the parameter values of the HTTP request and the data returned by the CGI cannot be interfered with when debugging the CGI interface. Fiddler as an HTTP debugging agent, not only can record all the HTTP communication between the client and the server, but also can modify the request data and return data, also called "Construction request" and "simulated response". In addition, the addition of the Willow plug-in Fiddler can also: statistics packets, modify host, request redirection, encoding conversion, low-speed simulation, breakpoint debugging, and filtering HTTP requests ... Fiddler contains a powerful event-based scripting subsystem and is capable of using. NET Framework language extensions. I'm sure you can't wait to install it.

2.Fiddler installation and Firefox configuration

Fiddler2 official: http://www.fiddler2.com/Fiddler2/version.asp, installation program about 600KB, is currently free. Fiddler installation is very simple, double-click the. exe file and then directly next, if the first time you run an error, it is most likely because the current computer does not match it. NETFramework, because Fiddler is written in the C # language and the operating environment of C # software is Microsoft's. NETFramework, so also to download the installation, still: http://www.fiddler2.com/Fiddler2/version.asp, if the first run fiddler no error, then very lucky your computer already has. NETFramework.

If you are accustomed to using IE browser so now can start debugging with Fiddler, if you usually use Firefox then also need to manually set up the agent to support Fiddler. Configuration mode--firefox Main Menu: Options---Advanced, network settings (such as), select "Manually configure Proxy" to enter the HTTP proxy as 127.0.0.1, and then "OK". At this time the Fiddler on the Support Firefox, when the fiddler to make Firefox normal connection to the network should cancel the above set of agents.

Meanings of various icons in 3.Fiddler

4. Fiddler usage rules ① Packet statistics

Run fiddler and open the bottom left corner of "capturing", in the browser address bar or fiddler command line at random enter a URL: http://tid.tenpay.com

After the carriage return, Fiddler will record all the packets between the client and the server, then select multiple requests and click "Statistics" to view the detailed datagram statistics:

(1) Total number of requests, request packet size, response packet size;

(2) Request start time, response end time, handshake time, wait time, routing time, TCP/IP transmission time, (3) HTTP status Code statistics, (4) The size statistics of various types of data returned and pie chart display.

② Monitoring Range settings

Fiddler not only listens to HTTP requests but also captures HTTPS requests by default, but if you want to learn more about the HTTPS communication details between the client and server, set it up under tool--Fiddler Option, HTTPS. Tick "Decrypt HTTPS traffic", if you do not have to listen to server-side certificate errors can be ticked "Ignore Server certification Errors", you can also skip a few designated host to narrow or expand the listening range.

③host modification

The Fiddler with the Willow plug-in installed is much easier to use. For example, the modification of the host does not have to go to the system disk to find the host file, we just need to create a new project under the Willow window, and then add all the host involved in the project. How to do this: Right-click on "Add Project" and right clicking on the new project, select "Add Host" and fill in the dialog box with the IP and the corresponding domain.

After the establishment of the host for later debugging use is very convenient, need to use when the hook on the hook, do not need to cancel, and control of the flexible, host modification can be domain name (single host) units can also be specific items. ：

④ Request Redirection (analog response)

The so-called request is nothing more than a call to some of the resources (including JS, CGI, CSS and pictures, etc.), so-called redirection is the page needs to call the resources of other resources (you can control the resources or resources can be referenced).

1. You can make a copy of many or some CGI from the foreground server locally, and if the CGI bug occurs in a normal network access environment and the development environment crashes, you can redirect the CGI request to the local copy so that you can continue to develop and debug your page. This greatly reduces the wait time for CGI maintenance.
2. You can also maintain a number of people at the same time a JS file copy out of the local, when your development debugging received other people debugging code interference, you can redirect this JS call to the local non-interference JS file, non-interference development, function development completed and debug OK and then carefully integrate your code into the development environment, This will prevent others from interfering with your development of the module, that is, the ability to separate the JS file from the development environment without affecting the online debugging.
3. You can also point the style file or picture locally if needed. Many pages in the development process are actually miserable, the reason is largely because of the lack of the corresponding style files or no picture resources, so the redirection of style files and images will bring the gospel to developers who have a slight aesthetic appeal.

In addition, you can use this artifact to do something, such as a change to Baidu homepage pictures happy.

How to do this: under the Autoresponser window, click "Add" to add a new redirect rule in the Open Rules dialog box "If URL matches" column fill in the main picture of the Baidu home page resource address: http://www.baidu.com/img/ Baidu_sylogo1.gif, in the corresponding "then respond with" column fill in the local image you want to see the address (or network image address) C:\Users\xxx\Desktop\111111.BMP (this picture is my local picture has my signature , you can also change to your beloved girlfriend's beautiful picture, give her a surprise , say you spend a big price to show a day ... ）。 Then refresh Baidu homepage, you will be pleasantly surprised to find that Baidu and Google originally can change the holiday picture like this ah! ：

⑤ Request Construction

The request construct as the name implies is that we can simulate the request, that is, we can use Fiddler's request Builder to modify the parameter value in the request without altering the actual code of the development environment and make it easy to recall the request again. Then double-click the request package for this new call to see how the CGI returns are more specific than the last call. Any request parameter as long as the legitimate value of the call after the CGI will have a corresponding response, then you want to any of the legitimate request combination can naturally be constructed according to your wishes, and then re-call and view the return data, very convenient!

Let me give you an example of a transaction query request construct. First go to the Transaction Query page grab packet to find the target request https://pay.tenpay.com/main/app/v1.0/trans_manage.cgi? Outputtype=json, double-click the package under the Inspectors tab to view the returned data as JSON format, and the XML format column is empty:

Drag the request left mouse button into the Fiddler Right Request Builder tab and modify the original request parameter Outputtype=json to OUTPU ttype=xml, then click the Execute button to trigger the call request again.

Double-click the request package under the Inspectors tab to view the return data as XML format, while the JSON format column is empty:

Alternatively, you can click the expand All and collapse buttons at the bottom left to expand or contract the return data.

⑥ Request Filtering

Grab a reload of the page, if the package has too many entries and you need to focus on a few items, you can use the Fiddler filter filters to grab the bag, then grab only the packets you want to catch. Switch to the Filters tab tick the use filter to activate the filter so that the various filters below can be selected.

(1) You can crawl only the nearest N sessions, if checked, the default is 200 sessions.

(2) You can filter by whether the host is an intranet or an extranet type, or you can specify more than one host, and define whether to crawl or hide these specific hosts, or you can mark them.

(3) You can crawl only the browser communication packet, or you can only crawl and the server to communicate the package.

(4) can be filtered according to the request head

(5) can also be filtered according to the status code of the response and the type and size.

⑦ Encoding Conversion

The front-end developers of code viewing, verification, conversion, contrast and other operations are also frequent, Fiddler also provides a variety of encoding conversion integration of a function, it is quite convenient to use. The encoding transformation can be opened under "Text Encode/decode" in "Tools":

⑧ Low Speed simulation

Sometimes due to compatibility considerations or performance optimization, at low speed often can quickly find the problem is also easy to find the performance bottleneck, but other debugging tools did not provide low speed environment, and the powerful fiddler to consider this point, can be low-speed simulation set rules > Performance > Stimulate Modem Speeds.

⑨ command Line

The use of the command line can often be done with less effort, so see how the following practical commands are used:

(1)? sometext

During the input process, fiddler will highlight the URL containing the input, and enter to select the sessions.

Eg:?searchtext

(2) >size

Select a session that returns a number of bytes greater than the number of inputs.

eg:>40000 <–select responses over 40kb

(3) <size

Select a session that returns fewer bytes than the number of inputs.

eg:<5k <–select Responses under 5kb

(4) =statu or =method

Select Response Status = Status or the session with Request Method = method.

eg:=301 <–select 301 REDIRECT Responses

Eg:=post <–select POST Requests

(5) @host

Select the session with the host name that contains the input, and enter select.

Eg: @msn. com <–select www.msn.com, login.msn.com

(6) Bold

Mark the URL that appears later with the input character as bold.

Eg:bold/bar.aspxbold <–call with no parameter to clear

(7) Bpafter

Truncates all response that contain the input characters in the Requestuti.

Eg:bpafter/favicon.icobpafter <–call with no parameter to clear

(8) BPS

Truncates all response return codes to the same input request.

eg:bps 404bps <–call with no parameter to clear

(9) BPV or BPM

Set a breakpoint on the corresponding HTTP request method, set this command to empty the previous settings, without parameters to cancel the breakpoint.

EG:BPV POSTBPV <–call with no parameter to clear

(Ten) Bpu

Set a breakpoint on the request containing the parameter, set this command to empty the previous setting, and cancel the breakpoint without parameters.

Eg:bpu/myservice.asmxbpu <–call with no parameter to clear

(one) CLS or clear clears the session list CLS.

Dump packs all sessions as zip files and puts them in C: \ Dump.

G or go to resume all interrupted sessions G.

Help is displayed on assist page.

() hide minimized to system tray hide.

(Urlreplace)

Replace the string in the URL request with another, set this command to clear the previous settings

Eg:urlreplace Seekstr Replacewithstrurlreplace

Start registration as System Agent, crawl HTTP protocol

Stop-close crawl stop

Show is recovered from the system tray and is useful in scripting commands show

() Select MIME

Select the response Content-type header that contains the input parameters for the session.

Eg:select imageselect csseg:select htmeg:select ui-bold * <–unless preceded by a slash, * means any valueeg:select Ui-comments \* <–find comments with a *eg:select @Request. Accept HTML <–find requests with Accept:htmlEg:sel ECT @Response. Set-cookie Domain <-Find responses that set-cookie on a domain

(allbut) or keeponly

Hides other sessions except the Content-type header that contains input parameters.

(Refer to http://tid.tenpay.com/?p=3011)

Front-end development tools-fiddle