10
votes

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

js errorcs no error

2
Do you use a webserver to serve the files? Is it possible that the webserver could not catch a) the map file b) the original file? - TheHippo
The file, and map are both being loaded. I can set breakpoints in the map even, it just does not show me where the errors occur. - Billy Moon
I've found discrepancies between source maps, map consumers and stacktrace line and column numbers. Some are zero indexed, others one. - Carl Smith
I have the same issue, using Browserify with only JS files, and I notice it goes away when loading the file directly...I'm only experiencing the issue when files are on my localhost server, now, how to fix it... - Michael Allan Jackson

2 Answers

3
votes

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.

0
votes

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.