What are source maps?
Notice how much easier it is to see the error. The clever thing is that the browser has actually downloaded the minified file, so the average user will be completely unaffected by the addition of a source map. The browser will only download the source map and unminified file when you ask it to (currently, that’s done by opening the developer tools of Chrome or Safari and enabling source maps).
Generating our source map
Adding this comment manually after each build would be annoying. Luckily, it’s very easy to extend Grunt so we’ve written a simple plugin to handle it for us. By including that plugin in our build script, all we have to do is add another small section to the Grunt config:
Fighting with Internet Explorer
If a library with a source mapping comment is included in a page after
conditional compilation has been turned on (it’s turned on with a comment
containing the string
errors. Internet Explorer will attempt to parse your source map comment as part
of the program, and will almost certainly fail because the source map URL
library.min.js.map in the example above) will not be a valid identifier.
For more details of the issue, see this jQuery bug report. That ticket also details a very simple workaround. By simply wrapping the source mapping comment in a multiline comment, Internet Explorer will not attempt to parse it, even when conditional compilation is active. All we had to do was make a little change to our Grunt plugin to get the comment output looking like this: