如何让谷歌浏览器调试开发工具看到咖啡脚本文件？

Question

我正在设置一个调试咖啡脚本文件的环境。 我正在使用 IDE webstorm，它从原始 .coffee 文件和 coffeescript 默认编译器生成 .js 文件和 .map。

所以我最终在同一个文件夹中找到了 4 个文件：

main.html、aa.coffee、aa.js、aa.map。 在 main.html 中，我包含了 js 文件。 JS文件包含：

// Generated by CoffeeScript 1.6.3
var my;

my = 1;

alert(my);

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

非常简单。加载 main.html 时，它会正确弹出警报。 现在，当我打开 google dev tools/source 时，我看到了我的文件树，我看到了 html 文件和 js 文件。但是出现 .coffee 文件是不可能的，尽管如上所示正确引用。当然，我确实在开发工具设置中启用了源映射。我观看了几个视频教程，并完成了咖啡文件出现的所有步骤。

这是另外两个文件的内容：

.coffee：

my = 1
alert my

.map：

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

您知道为什么源映射过程在 chrome 开发工具上不起作用吗？

Answer 1

编辑：我现在改变了主意，根本不使用源映射调试。首先，它通常是片状的。其次，如果我不写 JS，我至少应该能够阅读它，所以我总是在 js 中调试。

首先，请记住，目前 Chrome 中的源映射调试很不稳定。您可以尝试几件事：

1. 在您的代码中添加一个调试器语句。我注意到调试非常不稳定——大约 10% 的时间它不会在断点处停止。

2. 在源窗格中按 Ctrl O 直接打开咖啡文件，然后放置断点或使用调试器语句。

3. 找出"sourceRoot": "", 为空的原因。这可能只是意味着源文件将与 js 文件位于同一目录中（似乎很可能）。我的咖啡文件位于不同的目录中，因此它们有一个 sourceRoot 条目。

4. 使用 grunt 或 coffeescript 生成源映射。不过，这似乎不太可能产生影响。

我打赌 #2 会做到。