Debugging Chrome Favorite

When we deploy code to production, it's advisable to minify our code to reduce load times. Minification removes unnecessary characters such as comments, newlines and whitespace. However, minification makes it difficult for developers to debug code as we can no longer step through and read the code. JavaScript source maps are useful for debugging minified JavaScript files as they provide a map back to the original source.

To create a JavaScript source map, download Google Closure Compiler which will build the .map file for you.

Run Closure Compiler with Source Map Properties.

java -jar compiler.jar --js common.js --create_source_map ./common.js.map --source_map_format=V3 --js_output_file common.min.js

Add a sourceMappingURL with the name for a map file to the bottom of your JS minified file.

//@ sourceMappingURL=common.js.map

In Chrome Developer Tools, go to the "Settings" menu and within the "General" tab activate "Enable Source Maps".

Now when you debug your JavaScript, you can use the unminified version to see what's really going on.