Source Mapping in Coffeescript - errors not mapped to source

Question

I just became aware of source mapping - a long awaited feature. I am impressed so many people got together to make it happen for coffee-script (browsers, kickstart project etc...)

I set up a little test, so I could understand how to use it...

Coffeescript

N.B. there is a deliberate mistake here, as y is not defined

console.log 123

sq = (x)->
  x * x

console.log "thats how easy: "+sq y

Source Map

{
  "version": 3,
  "file": "test.js",
  "sourceRoot": "",
  "sources": [
    "test.coffee"
  ],
  "names": [],
  "mappings": ";AAAA;CAAA,CAAA,IAAA;CAAA;CAAA,CAAA,CAAA,IAAO;;CAAP,CAEA,CAAK,MAAC;CACJ,EAAI,QAAJ;CAHF,EAEK;;CAFL,CAKA,CAAA,IAAO,WAAK;CALZ"
}

Javascript

// Generated by CoffeeScript 1.6.1
(function() {
  var sq;

  console.log(123);

  sq = function(x) {
    return x * x;
  };

  console.log("thats how easy: " + sq(y));

}).call(this);
//@ sourceMappingURL=test.map

Jade

html
  head
    script(src="test.js")
  body
    h1 Test Page

This all seems to be working, because the coffee-script source is displayed, and I can even set breakpoints (but the graphic seems not to show, and it seems a little erratic in where the breakpoints are set in the javascript).

The problem I am having is that when there is an error, the console reports the line number of the javascript file. How can I find out the line of the coffee-script source file that causes the error?

I am using Google Chrome Version 23.0.1271.101 on OSX 10.8.2

Answer 1

I actually just answered my own question very similar to yours. You can take a look here.

The solution I am using is to concat/compile all my coffeescript with browserify,using coffeeify as a transform option. When debug is set to true in browserify, all your line numbers should map back to the correct line in your original coffeescript source.