问题标签 [source-maps]

我已经按照我能找到的所有指示让 Sass 源映射在 Chrome 中工作——但我仍然以某种方式失败。我不知道怎么——也许你可以？

test.css.map使用 Sass 3.3.0.alpha.198 （我听说是“最前沿”），我成功地生成了一个源映射文件（在编译后的 CSS 的底部是一行：/*# sourceMappingURL=test.css.map */. 所以这一步似乎进展顺利。

在 Chrome Canary 中，我进入chrome://flags并启用了开发者工具实验。我已经重新开始了。在我的检查器设置中，在“常规”选项卡中，我选中了“启用源地图”；在“实验”选项卡中，我检查了“Sass 样式表调试”。

毕竟，当我检查一个元素（在访问已编译 CSS 的本地 HTML 文件上）时，我仍然得到相同的旧 CSS 行号，链接到相同的旧已编译 CSS 文件。没有说明 sourcemap 支持。这不是教程所说的应该发生的事情。

（我也在稳定的 Chrome 中尝试过这个——它应该在稳定的环境中工作吗？——通过启用开发者工具实验并选中“启用源映射”和“支持 Sass”框。也没有运气。）

有人可以告诉我我错过了什么吗？

我将 Coffeescript 编译器配置为使用 IntelliJ 和 NodeJS 运行 map (-m)。我假设使用源映射我应该能够在 Chrome 开发人员工具中的咖啡脚本文件中进行调试。检查了启用源映射。我尝试打开任何 .coffee 文件，但出现“无法获取 /path.../foo.coffee”错误。咖啡脚本文件在源资源管理器中所在的文件夹很奇怪。../../../../../Web/src/test/webapps/installManager

我认为它反映了地图上的内容。

我的 js 文件中确实有 sourceMappingURL。/* //@ sourceMappingURL=Common.map */

以下是我运行 Coffeescript 编译器的配置：

应用参数：-cwm /home/repository/svn/ding/Web/src/test/webapps

既然地图现在可用，为什么 Chrome 不能获取咖啡文件？是因为 sourceRoot 中的路径和地图中的来源吗？

我能够在 Chrome 金丝雀中添加工作区并映射它们，甚至进行双向编辑，但我仍然无法调试（可以设置断点，但调试器从未在断点处停止）。

谢谢

我coffeescript用来做一些工作。它coffeescript被编译成一个简单的快速应用程序js并提供服务。gruntnodejs

我的文件夹结构确实遵循普通文件夹结构，其中包含一个assets用于要编译的内容的文件夹（coffeescript, stylus）和一个包含已编译内容的公用文件夹（js, css）：

我的coffee设置grunt是：

为了从资产目录中提供文件，我将其添加为我的快速应用程序中的静态目录：

Chrome 可以正确识别源地图，但咖啡文件的位置是错误的。例如，一个 url 看起来像http://localhost:3000/assets/coffee/main.coffee. 当然，这会导致 404，因为assets它是所有文件的根目录，coffee并且由我的 express 应用程序提供服务。

所以我需要调整sourceRoot变量。

• 如果我设置sourceRoot为sourceRoot: '/assets/'，Chrome 会生成指向http://localhost:3000/assets/main.coffee.
• 如果我将它设置sourceRoot: '/coffee/'为链接是http://localhost:3000/coffee/main.coffee. 这适用于assets/coffee/. 未找到assets/coffee/like子目录中的文件（生成的链接为）assets/coffee/lib/http://localhost:3000/coffee/util.coffee

设置sourceRoot选项似乎删除了文件夹结构？！

长问题短：什么是正确的设置sourceRoot？如何保留文件夹结构？

我将此问题作为可能的错误报告提交：https ://github.com/jashkenas/coffee-script/issues/3075

我一直在环顾四周，试图在包含 VS 2012 开发的 ASP.NET MVC 网络服务器的环境中找到 Sass 开发的解决方案。我们正在使用 Web 工作台进行 Sass 编译 - 这就是问题所在：

当工作台编译 SCSS 文件时，如果“debug”标志设置为 on，它会创建一个包含映射的 css 文件。

Chrome 开发工具“实验”是 Sass 调试的常用方法，需要一个独立的映射文件 (*.css.map)。不同之处在于最新的工作台使用 Sass 3.2.9，而源映射文件已在 sass 3.3 中引入。

有没有人有这方面的经验？我认为有几种方法可以去这里

1. 不知何故修改工作台
2. 以某种方式将 chrome 降级到使用内联映射的早期版本
3. 以另一种方式创建文件，不依赖工作台
4. 完全失去工作台以换取另一种选择（哪个？）

任何输入将不胜感激。谢谢。

我了解将源映射与 JavaScript 一起使用的概念，以便通过缩小脚本等更轻松地进行调试。我不明白的是源级调试如何像 Visual Studio 中的 TypeScript 那样工作（http://blogs.msdn.xml）。 com/b/typescript/archive/2012/11/15/announcing-typescript-0-8-1.aspx）。

例如，如果我创建自己的语言来编译/翻译为 JavaScript，我如何与浏览器交互以提供这种源代码级调试？有这方面的标准协议吗？Visual Studio 是如何做到的？

更新

为了进一步澄清，假设我发明了一种名为 Caffeinated Beverage Script 的语言，它可以编译为 JavaScript。我为我的语言构建了一个 IDE，我希望能够在我的 IDE 中设置断点、单步执行代码、检查变量等，同时 JavaScript 在浏览器中运行。如何让我的 IDE 与此级别的浏览器进行通信？

In IE doesn't work //@ sourceURL.

In Another browsers it's OK. How can I change this code for working in IE ?

使用 Chrome 时，我通过 Mocha 测试运行程序收到错误，作为afterEachwith的一部分捕获this.currentTest.err。

我正在使用令人敬畏的 coffeeify 插件使用带有调试选项的 browserify 编译咖啡脚本。这会生成一个bundle.js带有 a的编译文件sourceMappingURL=data:...，允许我直接查看和调试原始咖啡脚本。

不幸的是，当我访问err.stackMochaafterEach挂钩时，堆栈包含对相应文件的引用bundle.js而不是相应.coffee文件，这将更加有用。

这是一些带有 browserify 的示例代码。

首先，使用 npm 安装它（为方便起见）：

x.咖啡

转换为x.js：

x.html

如果在 Chrome 中打开它，开发工具将显示x.js, x.coffee(来自sourceMapURL) 和x.html.

当我们运行这个 HTML 页面时，我们会得到以下输出到console：

我们期望的是让跟踪引用.coffee文件，看起来像这样（为了说明目的，我在这里编造）：

有没有人成功地将错误堆栈转换为引用其源地图位置的项目的堆栈？

当我使用 Grunt 和 UglifyJS Grunt 任务时，我正在尝试让 sourcemaps 玩得很好。

这是当前的任务：

有什么问题？

sourcemap 已生成，但 Chrome 正在错误的位置（即dist/dist/video.min.js.map）搜索 sourcemap。我知道这一点，因为我在控制台中得到 404。

所以我编辑dist/video.min.js并更改sourceMappingURL为指向正确的位置。现在，源映射已加载，但正在完全错误的地方寻找 video.js：（又是dist/javascripts/video.js那个 dist！）

所以基本上现在我没有任何想法，只是在没有运气的情况下戳 gruntfile。

有任何想法吗？谢谢！

我有没有源地图的生产网站，并且我有本地匹配生产编译 + 缩小咖啡的 sourmaps。

有没有办法让浏览器的开发人员工具使用这个（本地）源映射而不实际将其上传到服务器并添加为 sourceMappingURL 注释或 http 标头？

我像这样链接到cloudflares cdnjs

jquery.min.js 像这样指向地图

哪个工作正常，但是在尝试获取源映射时它会预先添加我的主机名。

这会导致 GET 出错。有什么想法吗？

更新 问题似乎只发生在 Chrome (29.0.1547.49) 中。在 Safari 和 Firefox 中运行良好