Source Maps with Grunt, Browserify and Mocha

If you have been using source maps in your projects you have probably also encountered that they do not work with all tools. For instance, if I run my browserifyd tests with mocha I get something like this:

ReferenceError: dyanmic0 is not defined
    at Context.<anonymous> (http://0.0.0.0:8000/test/tests.js:4342:44)
    at callFn (http://0.0.0.0:8000/test/mocha.js:4428:21)
    at timeslice (http://0.0.0.0:8000/test/mocha.js:5989:27)
    ...

That's not exactly very helpful. After some searching I found a node module to solve this problem: node-source-map-support. It's easy to use and magically makes things work.

Simply:

npm install --save-dev source-map-support

require('source-map-support').install();

I place it in a file called dev.js that I include in all development builds.

Now you get nice stack traces in mocha, jasmine, q and most other tools:

ReferenceError: dyanmic0 is not defined
    at Context.<anonymous> (src/physics-tests.js:44:1)
    ...

Nicely enough this also works together with Qs long stack traces:

require('source-map-support').install();
var Q = require('q');
Q.longStackSupport = true;
Q.onerror = function (e) {
    console.error(e && e.stack);
};

function theDepthsOfMyProgram() {
  Q.delay(100).then(function(){
  }).done(function explode() {
    throw new Error("boo!");
  });
}

Will result in:

Error: boo!
    at explode (src/dev.js:12:1)
From previous event:
    at theDepthsOfMyProgram (src/dev.js:11:1)
    at Object./home/jonas/dev/sandbox/atomic-action/src/dev.js.q (src/dev.js:16:1)
    ...

That's more helpful. :) Thank you Evan!