Free HTML5 serialization: HTML5 web page development instance details: serialization (5) graphic accelerated development through Fiddler, html5

Free HTML5 serialization: HTML5 web page development instance details: serialization (5) graphic accelerated development through Fiddler, html5

Fiddler is the most powerful request proxy debugging tool in Windows. It monitors the HTTP/HTTPS traffic of any browser, tamper with client requests and server responses, and decrypt HTTPS Web sessions. Figure 4.44 shows the principles of Fiddler.

Figure 4.44 principles of Fiddler

Fiddler must be installed on Windows XP or Windows 8, where Fiddler2 depends on Microsoft. NET Framework 2.0, and the latest Fiddler4 depends on Microsoft. NET Framework 4.0.

There are many Fiddler functions. Here we will introduce one of the most commonly used proxy functions. If there is a script problem with the online functions of the maintained website, the traditional method is used to save the complete content of the webpage to the local device, and then debug the corresponding code, obviously, this method is cumbersome, and it is easy for Fiddler to solve this problem. To do this, save the corresponding problem script to the local machine, modify the script, and use the Fiddler proxy. The following uses an operation example on the Baidu homepage to demonstrate this process.

(1) Enable Fiddler, select the "AutoResponder" tab on the right, and check the "Enable automatic responses" and "Unmatched requests passthrough" check boxes, as shown in Figure 4.45.

Figure 4.45 enable Fiddler

(2) Open the Chrome browser, Enter "http://www.baidu.com" in the address bar and press Enter to Enter, then the Baidu homepage request will be completely displayed in the list on the left side of Fiddler, 4.46.

Figure 4.46 Baidu homepage request list

(3) Select the 5th requests in the list (the request is a JavaScript script), click and drag above the request to a blank list under the "AutoResponder" tab on the right, as shown in 4.47.

Figure 4.47 proxy for a script request

(4) copy the URL address of 5th requests, open it in a browser, and save the script content to the local folder of the machine.

(5) add one line of code at the end of the saved script:

Document. body. style. backgroundColor = 'black' // modify the page background color to black.

(6) modify the "then respond width .." column under the "AutoResponder" tab on the Right of Fiddler and point it to the locally saved script code address, as shown in 4.48.

Figure 4.48 modify the local proxy address of the request

(7) Open the Chrome browser, Enter "http://www.baidu.com" in the address bar and press Enter to Enter, Baidu home page becomes black, Fiddler proxy successful.

Tip: The functions completed in the example are just a simple simulation. In actual development, the reader can use the Fiddler proxy to modify the specific code of the local script, and then combine the debugging functions of the Chrome browser, solving online website problems will become simple and efficient.

The best book to learn HTML5 is "HTML5 web development instance details". It is much more interesting to use code to learn and use case studies !!! One book handles HTML5, starting from now on.