Coffeescript 中的源映射 - 错误未映射到源答案

【问题标题】：Source Mapping in Coffeescript - errors not mapped to sourceCoffeescript 中的源映射 - 错误未映射到源
【发布时间】：2013-03-03 10:10:54
【问题描述】：

我刚刚意识到源映射 - 一个期待已久的功能。让我印象深刻的是这么多人聚在一起为咖啡脚本（浏览器、kickstart 项目等）实现它

我设置了一个小测试，所以我可以理解如何使用它......

咖啡脚本

注意这里有一个故意的错误，因为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

翡翠

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

这一切似乎都在工作，因为咖啡脚本源已显示，我什至可以设置断点（但图形似乎没有显示，并且在 javascript 中设置断点的位置似乎有点不稳定） .

我遇到的问题是，当出现错误时，控制台会报告 javascript 文件的行号。如何找出导致错误的咖啡脚本源文件的行？

我在 OSX 10.8.2 上使用 Google Chrome 版本 23.0.1271.101

【问题讨论】：

您是否使用网络服务器来提供文件？网络服务器是否可能无法捕获 a) 地图文件 b) 原始文件？
文件和地图都在加载中。我什至可以在地图中设置断点，它只是没有告诉我错误发生在哪里。
我发现源映射、映射使用者和堆栈跟踪行号和列号之间存在差异。有些是零索引的，有些是零索引的。
我有同样的问题，只使用带有 JS 文件的 Browserify，我注意到直接加载文件时它消失了......我只在文件在我的本地主机服务器上时遇到问题，现在，如何解决它...

标签： javascript google-chrome coffeescript source-maps

【解决方案1】：

实际上，我只是回答了与您的问题非常相似的我自己的问题。你可以看看here。

我正在使用的解决方案是使用browserify 连接/编译我所有的coffeescript，使用coffeeify 作为转换选项。在 browserify 中将 debug 设置为 true 时，您的所有行号都应映射回原始咖啡脚本源中的正确行。

【讨论】：

我只对 JS 文件使用 browserify，发现同样的问题，控制台中的错误不会映射到单个文件。我认为这里还有另一个问题......

【解决方案2】：

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

如果您在控制台打开时刷新浏览器，控制台将使用指向源映射文件的链接进行更新。

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

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

【讨论】：