How to have google chrome debug dev tools see coffeescript files?

Question

i'm setting up an environment to debug coffeescript file. I'm using an IDE, webstorm, that genrates both .js file and .map from original .coffee file, from coffeescript default compiler.

So I endup with 4 files all in same folder:

main.html, aa.coffee, aa.js, aa.map. in main.html I include the js file. The JS files contains:

// Generated by CoffeeScript 1.6.3
var my;

my = 1;

alert(my);

/*
//@ sourceMappingURL=aa.map
*/

Very simple. When loading main.html it correctly popup the alert. Now when I open google dev tools / source, where I see the tree of my files, I see the html file and the js file. But it's IMPOSSIBLE to have the .coffee file appear, although correctly referenced as you can see above. Of course, I did enable sourcemap in dev tools settings. I wathed several video tutorial and I did all step for the coffee file to appear.

Here is content of the 2 other files:

the .coffee :

my = 1
alert my

the .map:

{
"version": 3,
"file": "aa.js",
"sourceRoot": "",
"sources": [
"aa.coffee"
],
"names": [],
"mappings": ";AAAA,EAAA,EAAA;;AAAA,CAAA,CAAA,CAAK;;AACL,CADA,CACA,GAAA"
}

Do you have an idea why the source map process doesn't work on chrome dev tools ?

Answer 1

edit: I've now changed my mind on all this and don't use source-map debugging at all. First, it was generally flaky. Second, if I'm not writing JS I should at least be able to read it so I always debug in js.

First, keep in mind that source map debugging is flaky in Chrome right now. A couple things you can try:

1. Put a debugger statement in your code. I've noticed that the debug is very flaky -- about 10% of the time it just won't stop on breakpoints.

2. Open the coffee file directly by pressing Ctrl O in the sources pane then place breakpoints or use debugger statements.

3. Figure out why "sourceRoot": "", is empty. It's possible that that just means that the source file will be in the same directory as the js file (seems likely). My coffee files are in a different directory so they have a sourceRoot entry.

4. Generate the source maps with grunt or coffeescript. This seems unlikely to have an effect though.

I'm betting #2 will do it.