Coffeescript中的源映射 - 错误未映射到源代码

Question

我刚刚了解到源代码映射-一项期待已久的功能。我印象深刻，很多人为了coffee-script（浏览器，kickstart项目等等）而共同努力实现它。

我设置了一个小测试，以便我能够理解如何使用它...

Coffeescript

注意：这里有一个故意的错误，因为y未定义

console.log 123

sq = (x)->
  x * x

console.log "thats how easy: "+sq y

源代码映射

{
  "version": 3,
  "file": "test.js",
  "sourceRoot": "",
  "sources": [
    "test.coffee"
  ],
  "names": [],
  "mappings": ";AAAA;CAAA,CAAA,IAAA;CAAA;CAAA,CAAA,CAAA,IAAO;;CAAP,CAEA,CAAK,MAAC;CACJ,EAAI,QAAJ;CAHF,EAEK;;CAFL,CAKA,CAAA,IAAO,WAAK;CALZ"
}

Javascript

// Generated by CoffeeScript 1.6.1
(function() {
  var sq;

  console.log(123);

  sq = function(x) {
    return x * x;
  };

  console.log("thats how easy: " + sq(y));

}).call(this);
//@ sourceMappingURL=test.map

Jade

html
  head
    script(src="test.js")
  body
    h1 Test Page

所有似乎都在运作，因为 CoffeeScript 的源代码被显示了出来，而且我甚至可以设定断点（但图形好像没有显示，并且在 JavaScript 中设置断点时有些不稳定）。

我遇到的问题是，在出现错误时，控制台会报告 javascript 文件的行号。我该如何找出导致错误的 coffee-script 源文件的行号？

我正在使用 macOS 10.8.2 上的 Google Chrome 版本 23.0.1271.101。

- Billy Moon

---

你使用Web服务器来提供文件吗？是否有可能Web服务器无法捕获a)地图文件b)原始文件？ - TheHippo

文件和地图都正在加载。我甚至可以在地图中设置断点，但它没有显示错误发生的位置。 - Billy Moon

我发现源映射、映射消费者和堆栈跟踪行列号之间存在差异。有些是从零开始索引，而其他一些则是从一开始。 - Carl Smith

我遇到了同样的问题，使用Browserify只有JS文件，当直接加载文件时，我注意到问题消失了...只有在我的本地主机上存在文件时，我才会遇到这个问题，现在该如何解决它... - Michael Allan Jackson

Answer 1

我实际上刚刚回答了一个与你类似的问题。你可以在这里查看。

我使用的解决方案是使用coffeeify作为转换选项，通过browserify将所有的coffeescript连接/编译在一起。当在browserify中设置debug为true时，所有行号都应该映射到原始coffeescript源代码中的正确行。

- nicksweet

---

我只使用JS文件来使用browserify，但是遇到了同样的问题，在控制台中的错误不会映射到具体的文件。我认为这里可能还有其他问题... - Michael Allan Jackson

Answer 2

我发现这个问题只会在 Chrome 控制台初始打开时出现。

如果您在控制台打开的情况下刷新浏览器，则控制台将更新为源映射文件的链接。

此外，如果您先打开控制台，然后再导航到该页面，控制台将更新为源映射文件的链接。

这是与 Chrome 第一次打开控制台相关的问题。

- Michael Allan Jackson