已加载CoffeeScript源地图，但Chrome未提取源

Question

我正在尝试让源地图适用于Chrome中的CoffeeScript。我可以看到coffee正在正确生成源地图，事实上Chrome的开发工具显示源地图文件是从我的本地HTTP服务器成功获取的。

但是，.coffee文件本身未被提取，即使我能够在浏览器中手动GET。

我怀疑这可能与目录结构有关。我正在服务HTTP的目录（使用简单的python服务器）如​​下所示：

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

因此，当我在浏览器中打开index.html时，会正确获取.js和.map个文件。 .map文件如下所示：

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

什么可以阻止Chrome获取coffeedrag.coffee？

Answer 1

Chrome会从文件中的小注释中加载JS文件的源地图文件，如下所示：

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

除非您指定--bare标记，否则通常会将其从CoffeeScript编译器中删除：http://coffeescript.org/#usage

例如在Gruntfile.coffee我有：

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

然后将CoffeeScript文件打开到Chrome：

如果我在代码中添加debugger，则每个sa，我得到：