问题标签 [source-maps]

我正在尝试让源映射在 Chrome 中为我的 CoffeeScript 工作。我可以看到它coffee正在正确生成源映射，实际上 Chrome 的开发工具显示源映射文件已从我的本地 HTTP 服务器成功获取。

但是，.coffee文件本身并没有被获取，即使我可以GET在浏览器中手动获取它。

我怀疑这可能与目录结构有关。我提供 HTTP 服务的目录（使用简单的 python 服务器）如​​下所示：

因此，当我index.html在浏览器中打开时，会正确获取.js和.map文件。该.map文件如下所示：

什么可能阻止 Chrome 获取coffeedrag.coffee？

使用 WebStorm 7.0.1 运行 yeoman 角度生成器 grunt 服务器会抛出：

在浏览器加载的文件中搜索.js.map或搜索sourceMappingURL不会返回任何结果，并且在项目源中没有与错误中的这些文件相关的结果。

仅当 WebStorm 连接到 JetBrains IDE 支持插件、初始启动和文件更改实时重新加载时，才会显示错误。它们显示在 IDE 的 javascript 调试控制台和浏览器控制台中，但是一旦打开开发人员工具并从浏览器完成刷新，就不会抛出任何错误（因此我无法在网络选项卡，除非有办法在新选项卡加载时启动开发人员工具，编辑：实际上这也不起作用）。

重现问题的步骤：

• 安装 yeoman 角度发生器
• 从这些来源创建一个 webstorm 项目
• 使用以下配置启动项目（将为 JS 自动创建第二个配置）：

节点解释器：pathToNode\nodejs\node.exe

工作目录：ProjectRootFolder

JavaScript 文件：C:\Users\UserName\AppData\Roaming\npm\node_modules\grunt-cli\bin\grunt

应用参数：服务器

对于浏览器/实时编辑：

检查启动后

用 JavaScript 调试器检查

开始网址：http://localhost:9000

关于如何调试这些错误的任何想法？谢谢您的帮助！

当我从缩小的 js 生成源映射回源文件时，该映射是否包含源文件的文本，还是需要单独托管它们？

HTML5 Rocks 描述提到了sources列出源文件名称的键，并解释了如何将mappings缩小的行号和列号映射到原始行号和列号，但建议“您还需要上传原始文件，以便开发工具可以参考并在必要时显示它们”。

Browserify 的debug选项生成内联源映射，在开发工具中显示原始文件，而无需单独托管源文件。

当前的源地图规范是否支持两者？

我想将源地图添加到我的网站，但我想对它们的服务方式进行一些控制。什么是适合他们使用的 MIME 类型？

一些数据

• 内容本身是 JavaScript，但并不意味着这样执行。
• CDN.jshttp://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.map与Content-Type: application/octet-stream.
• 谷歌服务http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.map于Content-Type: application/json
• Source Maps 规范指出，地图应首先)]}防止它们被评估为实际的 JavaScript（从而暴露跨站点脚本攻击）。这使得文件无效 JSON 和有效但不可运行的 JavaScript。

所以我最近一直在研究这个并尝试不同的方法。我只能使用 Sass 运行源地图，但仍然需要弄清楚自动重新加载应该如何工作。

我在使用 Sass 和 Compass 的最新可能宝石的 RoR 环境中工作

使用指南针时出现此错误File to import not found or unreadable: compass/reset.如果我尝试gem "compass-sourcemaps", "~> 0.12.3.sourcemaps.a4836f1"不走运，则会出现应用程序错误。

在 github 和其他网站上，有人建议我可以使用 grunt 或 compass watch，这是不可能的解决方案，因为我希望能够在 Asset-pipeline 上工作。

任何正确方向的线索将不胜感激！

也许我应该改用波旁威士忌？浏览我的所有代码会很耗时，但我正在认真考虑放弃 Compass :(

PS这里已经有类似的问题，但它们是几个月前的，并没有真正给我任何新的见解。

I have created a concatenated, minified file through the Node.js wrapper for Google Closure Compiler. When I open the Developer Tools in Google Chrome, both the source map and the mapped files all load appropriately.

A problem I'm having is that breakpoints aren't triggering in the source map files like they would running an unminified, separate-file session. Sometimes I'll try to place a breakpoint in a script and it will jump several lines down rather than where I'm trying to set it. But what is most frustrating is that when I can set a breakpoint, they aren't triggered! I'll set one in the middle of a function that I know is being called, but the script never pauses execution.

EDIT

I'm running Chrome 31.0.1650.57 on Ubuntu 13.10. I can't get it to work in Firefox 25.0 either.

首先，我在 chrome 中启用了源映射。然后我去http://dev.fontdragr.com/使用源地图，我发现地图文件也被下载了，但缩小的源仍然显示在源选项卡中。

铬版 version 30.0.1599.114 Ubuntu 13.10 (30.0.1599.114-0ubuntu0.13.10.2：）

我也试过用firefox，还是不行。

当你第一次下载谷歌浏览器时，源地图的默认设置是什么？

Chrome 调试器的常规设置面板中有一个复选框，显示“启用 JS 源映射” - 第一次安装 Chrome 时默认选中还是未选中？我的打勾了，但我不记得是从一开始就这样，还是我手动打勾 - 将 Chrome 设置重置为出厂默认设置似乎不会重置调试器设置，因此无法判断。

这是我正在写的教程。

在尝试为 chrome http://blog.vhyza.eu/blog/2013/09/22/debugging-rails-4-coffeescript-and-sass-source-files启用源映射后，我从 heroku 收到以下警告-in-google-chrome/ 他们表示什么，如果有的话，我应该改变什么？

我的宝石文件：

我的错误日志：

...剪辑...

...剪辑...

...剪辑...

我正在尝试让 SASS 源映射和自动重新加载/保存到磁盘工作。我已设置好所有内容grunt-contrib-sass并监视任务以重新编译我.scss的更改，并且我的源映射在 Chrome 中以我可以编辑 SASS 并将其保存到磁盘的方式正常工作。我的问题是，当我编辑 SASS 时，页面会重新加载，就好像根本没有 CSS。如果我然后重新加载页面，我应用的更改确实存在。

知道为什么会这样吗？

在开发工具中更改 sass 之前： http: //cl.ly/image/1R2o2I113H3y 之后：http ://cl.ly/image/1m0V3b0J420X

我正在使用谷歌金丝雀 33.0.1738.0