Source Mapping in Coffeescript - errors not mapped

问题:

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

回答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.

回答2:

I found that the problem only occurs on the initial opening of the Chrome console.

If you refresh the browser while the console is open, the console will update with links to the source-mapped files.

Also, if you open the console first and then navigate to the page, the console will update with links to the source mapped files.

This is an issue associated with Chrome opening the console for the first time.