Two tools for front-end development and debugging on-line code

Using the two models of Charles and Fiddler, the records are as follows.

First, Charles

The Charles interface is simple and intuitive, easy to get started with, easy to control data requests, easy to modify, and convenient to start pausing data. Support Win,mac,linux.

1. Installation Prerequisites
Charles needs a Java environment, please download and install the JDK in advance. The JDK is already 8.

Choose the JDK that corresponds to your system. My is Win7, double-click the installation, the next step is OH. Enter the following command in the Command Line window, showing that the JDK installation was successful

2. Download Charles

Charles can go to the official website to download, if not the latest version, there are cracked version. Installation is also the next step on the line. The start screen is as follows

3. Debug code on line

Now it's time to start Charles to debug, about the steps.

1. Start Charles
2. Open a browser (such as Firefox), access the debug address (for example, this is trip.jd.com)
3. Select the files you want to debug, the front end is js/css most of the time, download to local
4. Map the file URL on the line to a locally downloaded file

This makes it arbitrary to modify the local file to see the results.

The following is a debug trip.jd.com test that modifies the search.js introduced in this page

Start Charles, the browser opens trip.jd.com, and you can see that Charles has been able to capture numerous requests for that page.

After downloading search.js to local, you need to put the map through Charles, select Menu Tools--Map Local. You can also directly right-click the file pop-up menu to select

Select a local search.js

To the local search.js, pity Dorado things.

Back to the browser, and then refresh the next trip.jd.com, you can see the results of the changes

Well, the simplest use is done.

Second, Fiddler

Fiddler is the most widely used on-line debugging tool on the front end, it is not dependent on other environments and can be installed directly. The disadvantage is that it can only be used on win because it is written in C #.

1. Installation

The installation is super simple, and the next step is just the right download. The start screen is as follows

2. Use

Roughly like Charles, open the browser to the page you want to debug, navigate to the resource you want to debug (JS, CSS), and map to local.

Or the Search.js test under trip.jd.com.

First clear out the existing request data

Browser open access Trip.jd.com,fiddler can capture the request, find Search.js

Right panel switch to Autoresponser, tick two options

Drag the left search.js into the autoresponser.

Bottom right Corner "Rule Editor" the bottom dropdown select "Find a File"

Select the search.js you downloaded to the local and click "Save"

At this time can be wayward to modify the local search.js, before adding a alert, back to the browser refresh page can see the effect.

Related:

http://drops.wooyun.org/tips/2423

Two tools for front-end development of debug code on line