0

我正在尝试让源映射在 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？

4

1 回答 1

1

Chrome 从文件中的一个小注释加载 JS 文件的源映射文件，如下所示：

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

通常这会从 CoffeeScript 编译器中删除，除非您指定--bare标志：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，我得到：

在此处输入图像描述

于 2013-11-04T10:33:42.970 回答