Debug online VUE projects using Fiddler and Sourcemap

Generally, errors reported in online VUE projects are as follows:

All are compiled JS, unable to determine the error location, a little bit of tracking is really affecting efficiency

Using Sourcemap and Fiddler local agents is a good solution to this problem

1 Adjust packing

Using Sourcemap for online project debugging requires modifying the packaging configuration and declaring the Sourcemap file in webPack-compiled JS

For example, app.xxxx.js will end with:

//# sourceMappingURL=app.0b2023a2.js.map
Copy the code

Modify the vue. Config. Js:

Export {// other configurations productionSourceMap: true}Copy the code

Xxx.js. map files will appear in the packaged directory. Copy them to the fixed directory and delete them

And then the project goes live

Download and install Fiddler for Windows users using the Classic version

Go to the AutoResponder TAB and check and add rules:

You can start by opening the console to see which sourcemaps are missing and adding a corresponding proxy rule

Such as:

We can create a proxy:

Refresh the page again and you can debug