CoffeeScript source maps loaded but sources not fetched by Chrome

Question

I'm trying to get source maps to work for my CoffeeScript in Chrome. I can see that coffee is generating the source maps properly, and in fact Chrome's dev tools shows that the source map file is fetched successfully from my local HTTP server.

However, the .coffee file itself isn't being fetched, even though I am able to GET it manually in the browser.

I suspect this might have something to do with the directory structure. The directory from which I'm serving HTTP (using a simple python server) looks like this:

./
  index.html ("includes" 'lib/coffeedrag.js)
  src/
    coffeedrag.coffee
  lib/
    coffeedrag.js
    coffeedrag.map

So, when I open index.html in the browser, the .js and .map files are fetched properly. The .map file looks like this:

{
  "version": 3,
  "file": "coffeedrag.js",
  "sourceRoot": "..",
  "sources": [
    "src/coffeedrag.coffee"
  ],
  "names": [],
  "mappings": "[ trimmed for brevity ... ]"
}

What could be stopping Chrome from fetching coffeedrag.coffee?

Answer 1

Chrome loads the source maps file for a JS file from a little comment in the file, like so:

/*
//@ sourceMappingURL=app.js.map
*/

Usually this is stripped out of the CoffeeScript compiler unless you specify the --bare flag: http://coffeescript.org/#usage

Eg in my Gruntfile.coffee I have:

module.exports = (grunt) ->
  grunt.initConfig
    coffee:
      dev:
        expand: true
        cwd: 'assets/js/'
        dest: '<%= coffee.dev.cwd %>'
        ext: '.js'
        src: [
          '*.coffee'
          '**/*.coffee'
        ]
        options:
          bare: true
          sourceMap: true

This then opens up the CoffeeScript files to Chrome:

And if I add a debugger in my code, per sa, I get: