How are Javascript source maps generated?

Question

I have been hearing more and more about source maps and how you can generate them using the Closure compiler to provide all the debugging goodness you are used to in development after you have compiled and minimised your code. Apparently there is also support for compiled-to-js languages like CoffeeScript.

I find this incredibly cool! (Kudos to everyone involved in making this possible)

What I am interested in though is:

1. How is this achieved? (primary question)
2. Why is this useful (as opposed to just debugging in development mode)? (secondary)

Answer 1

How is a Source Map Created?

The Html5 Rocks site has a great tutorial on generating source maps and shows examples with Closure-compiler. The commands for each tool will vary, but the output should be about the same.

Why Source Maps are Useful

Tools which compress, compile, optimize or generate JavaScript invariably introduce errors. These errors often are not present in the development (uncompressed - raw code) environment. However debugging compressed code is unbelievably painful.

Source maps make the compressed/mangled code map to the original so that you appear to be stepping through the original code. Thus when an error occurs you know right where the problem lies.