I'll create some more posts after this to help you fully automate the creation of source-maps using Grunt, npm, Lint etc. - but first let's start with the basics:
Now in reality - we would like to see this in the debugger:
So even though the browser receives a minified file, when debugging we want the real thing.
By convention, any minified JS can have a final line telling the browser that there is help material for debugging - like this:
Thanks to this piece of magic the browser will now show you the original code when debugging. You can even set break-points and everything. This is awesome!
Hope this helps you!
With love from Switzerland,