A source map allows a JavaScript debugger to map line and symbol information from a transformed (eg. minified, optimized) JavaScript file back to the original input file used for the transformation. The original file can be any kind of text file which in effect enables in-browser debugging of any language compiling to JavaScript.
JavaScript code used on websites has often gone through various stages of automated transformation (eg. minification, optimization, etc.), or have even been generated from a non-JavaScript source language targeting JavaScript as the runtime environment. These automated translations often make the final code much more difficult to understand and debug using development tools inside the browser.
Source maps solve the problem by giving the JavaScript debugger enough additional information to effectively translate locations and symbols between the processed JavaScript code and the original input file used to create it.
JavaScript source maps is a technology proposal from Google and Mozilla, and currently developed inside the Closure Compiler, WebKit, and Mozilla's DevTools.
Because source maps are not yet officially released and documented, good information about them is somewhat scarce. The following articles give an overview of the current state of source maps:
- Tuts+: Source Maps 101 (2013-01-16)
- HTML5 rocks: Introduction to JavaScript Source Maps (2012-03-21)
