Menu
In a sense, source maps are the decoder ring to your secret (minified) code. Using Webpack, specifying devtool: "source-map" in your Webpack config will enable source maps, and Webpack will output a sourceMappingURL directive in your final, minified file.
Open any web site. Open developer tools in chrome by pressing F12 /Ctrl + Shift + I/ right-click anywhere inside the web page and select Inspect/Inspect Element which will be mostly the last option. Go to Sources tab in developer tools and open any minified JS which you want to debug as shown in the image.
Set 'mode' option to 'development' or 'production' to enable defaults for this environment. We can get around this by passing --mode production in the cmdline like below: npm run webpack --mode development ... As is mentioned on the webpack documentation, blog and everywhere else on the internet.
You can use source maps to preserve the mapping between your source code and the bundled/minified one.
Webpack provides the devtool option to enhance debugging in the developer tool just creating a source map of the bundled file for you. This option can be used from the command line or used in your webpack.config.js configuration file.
Below you can find a contrived example using the command line to generate the bundled file (bundle.js) along with the generated source map file (bundle.js.map).
$ webpack --devtool source-map ./entry.js bundle.js
Hash: b13b8d9e3292806f8563
Version: webpack 1.12.2
Time: 90ms
Asset Size Chunks Chunk Names
bundle.js 1.74 kB 0 [emitted] main
bundle.js.map 1.89 kB 0 [emitted] main
[0] ./entry.js 85 bytes {0} [built]
[1] ./hello.js 59 bytes {0} [built]
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
var hello = require('./hello.js');
document.body.innerHTML += 'It works ' + hello();
module.exports = function () {
return 'Hello world!';
};
If you open index.html in your browser (I use Chrome but I think it is also supported in other browsers), you will see in the tab Sources that you have the bundled file under the file:// scheme and the source files under the special webpack:// scheme.
And yes, you can start debugging as if you had the original source code! Try to put a breakpoint in one line and refresh the page.
I think its better to setup your project using production and development mode https://webpack.js.org/guides/production/ Its also include how to map your code to debug
devtool: 'inline-source-map'
Source maps are very useful as already pointed out.
But sometimes selecting which source map to use could be a pain.
This comment on one of the Webpack source map issue might be helpful for selecting which source map to use based on requirements.
Chrome also has a format option in the debugger. It doesn't have all the information a normal source file would but it's a great start, also you can set breakpoints. The button you click is on the bottom left of the first screen shot, looks like {}.
Before formatting:
After formatting.
Have a look Here
its a beautifier that deminifies javascript. at the bottom, it has a list of various plugins and extensions for browsers, check them out.
you might be interested in FireFox Deminifier , its supposed to deminify and style your javascript when its retrieved from the server.
(source: mozilla.net)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With