The things that fiddler in mobile development

When I used to tune the PC Web page, Firefox has Firebug,chrom also has its own debugging clutch tool, easy to use.

But now I have to debug the page on the phone, this time there is no such a convenient ready-made tools.

After the discovery of Fiddler, set up, you can use this to crawl the phone when the request to access the page.

Here is an outline of the article:

1. Fiddler configuration and Wireless configuration of mobile phone
2. Host modification
3. Autoresponder
4. Instructions
5. Filtering filter
6. Plug - ins

First, fiddler configuration and mobile phone wireless configuration

1, first computer and mobile phone to use the same wireless

2, configuration Fiddler, stand-alone tools= "Fiddler Options

　　

3, configure mobile phone wireless, my mobile phone is Android, iOS is similar, is to add a proxy and port, the hostname is your computer's IP address, your own with Ipconfig look down there.

After the change, to reconnect, in order to let the Fiddler crawl.

　　

Second, host modification

I started debugging mobile Web pages, the first to upload files to the server bound domain name, and then access the test, so that the efficiency is a bit low.

The previous PC Web pages were uploaded to the server after local debugging, and now I want to do so, this time need to configure the domain name in the fiddler to turn.

1, for example, to visit http://www.pwstrick.com/fiddler/on the mobile phone page:

　　

The Fiddler crawl to the following:

　　

2, Next I want to let http://www.pwstrick.com/fiddler/ visit is my this project document.

Click on the tools= "hosts open page as follows:

　　

Filled with joy that the domain name has been turned, open with a browser, Duang is the following bird like:

　　

I thought I'd have to configure a virtual directory on my local Apache:

　　

Refresh next page: The pop-up becomes locally set.

　　

Now the HostIP that accesses the Pwstrick address becomes 127.0.0.1.

　　

Third, Autoresponder

Just above the host modification, is to put all the files under this domain are redirected. But sometimes you just need to test a file, this time you can use Autoresponder.

1, the first and the second tick, the second does not tick the words, all the pages can not be accessed , the second option means that the mismatch of the request will remain unchanged.

　　

2, in the following to make a matching rule, I choose the exact match, here can use regular expression, tall things.

　　

　　

3, full of anticipation of the refresh under the page, came out with the contents of the Demo2.js file

　　

Click to go to the Fiddler document page to see more rule cases ...

This request can also allow him to delay the request, or otherwise, the options are as follows:

　　

Iv. directives

At the bottom of the software there is a command place, at present I use the most CLS, is clear screen, other instructions are not used, I am relatively low, embarrassed. Click to view Fiddler official documentation .

　　

Just looked at the document and found several instructions that should be used in the future, here's a small record.

? sometext

　　

　　

Enter Pwstrick and then press ENTER directly to see the address in the search URL that contains the Pwstrick.

=status

=method

Select the response status =status (200, 404, etc.) or the session (POST, get, etc.) of the request method =method

@host

Select the session in which the domain name contains host, press ENTER to highlight all matching results

Will be api.pwstrick.com, www.pwstrick.com and other URLs selected

　　

!dns hostname

Make DNS lookups of the target domain name and display the results on the Log tab

　　

　　

V. Filtering filter

　　

A lot of options, here I'm going to filter out the pwstrick.com, and then tick that option.

Then click on the actions in the run Filterset now, do not filter the request, too many eyes to see the flowers, casually visit a website on the line there are dozens of requests, swish down

　　

Six, plug-in

1. JavaScript Formatter

Format the compressed JavaScript script to look at the compression scripts of others ' websites with great force

First you have to download the plugin and then install, click on the page search to JavaScript Formatter, click to download.

After the installation is restarted fiddler, the next message that URL will see in the Red Box option, click.

　　

The next step is to see good JavaScript script, but not enough color, no highlighting. This time can be assisted by another plug-in, that is syntax-highlighting add-ons, is also in the official website of the plugin page search title download, after downloading will be more than Syntaxview options, in the picture I have downloaded the good, and syntax-highlighting add-ons this plugin can also do some other functions to view the document in detail.

2, Gallery

This is a picture of a plugin, without this plugin I have to copy the URL, and then enter the browser to look at the picture.

I grabbed the Petals Web page to do a demo: I first made a domain filter, next to the Gallery column will automatically come out of the picture.

　　

　　

Resources:

Http://www.6san.com/789/Fiddler filtering the specified domain name

http://tid.tenpay.com/?p=3011 Front-end development tool-fiddler

http://ju.outofmemory.cn/entry/148593 using the front-end development tool fiddler debugging phone programs

http://www.cnblogs.com/mcho/p/3983066.html Fiddler (vi) most commonly used shortcut keys

http://my.oschina.net/leejun2005/blog/151103 about Web/http Debugging tool Fiddler some tips to share

The things that fiddler in mobile development