Chrome上的Sass源地图支持无效

Question

在开始之前，我仔细检查StackExchange，我没有找到任何适合这个问题的网站。如果我错过了，请找借口。

我按照this指南，启用了源代码地址支持的chrome，但我无法使其工作。

有趣的是，我遵循了另一个指南，为Firefox启用了支持，并且正在运行。

两者的共同点是在rails中设置config.sass.debug_info = true。

所以，我认为问题不在轨道上，而在于chrome，但我不确定。

这是我的设置：

• rails 3.2.8
• Ubuntu的
• Chrome 27.0.1453.110

更新 - Chrome 27.x系列似乎存在问题。如果是这种情况，这个问题将变成等待Chrome开发人员的修复。所以我会调查一下，如果我能证实，我会关闭这个问题。谢谢你的时间。

更新 - 所以看起来确实如此，这是Google Chrome的一个问题，感谢所有人的帮助

Answer 1

问题是Chrome开发者工具最近更改了它支持的源地图版本。您提到的文章详细介绍了如何设置旧式CSS源映射。但是，Chrome现在支持version 3 source maps。新的源映射将映射放在单独的* .css.map文件中，而不是在编译的CSS文件中内联。新格式的好处是它更小，并且不会破坏旧版Internet Explorer的样式。 @ justin-smith提供的link应该指向正确的方向。但是，根据我的发现，即使SASS gem的预发布版本3.3知道如何生成.map文件，仍然需要来自sass-rails gem的支持才能从Rails资产管道正确地提供这些文件。我创建了一个repo，以便找出Rails中v3 sass源映射的当前支持状态。可能有一种方法可以将资产管道短路并拥有sass gem预编译文件，并将它们放在资产路径早期的目录中。但是，我还没弄清楚如何做到这一点。

Answer 2

尝试按照this link中的教程进行操作。我今天早上刚开始这样做，它对我来说很好。

这将让您检查一个元素，然后找到相应的SCSS声明。

Answer 3

我刚刚遇到问题让SASS源地图开始在我的主机上运行....我完全不知道什么是解决方案，因为生成了map-file，sourceMappingURL-tag存在且一切都很好， Chrome已配置，我甚至使用了金丝雀版.....但后来我得到了它： 我使用了一个带有自签名SSL证书的开发Web服务器，我需要测试我的身份验证等。当我切换到没有加密的普通HTTP时，我的源映射立即开始工作。

Answer 4

正如@gerryster所说，Chrome现在支持source maps proposal v 3。我写过关于Debugging Rails 4 CoffeeScript and Sass source files in Google Chrome的博文。

Answer 5

对于尝试过所有内容并且无法使css源地图生效的人，请确保源地图实际上可通过URL访问。在我的例子中，重写规则没有暴露源地图。一旦我改变了它，它立即起作用。

Answer 6

如果其他人在努力让Chrome与Sass合作之后最终在这里，您需要运行不同的命令来通过命令行生成源地图：sass --watch --sourcemap sass/styles.scss:styles.css而不是--debug-info。较新版本的Chrome现在支持源地图而不是in-css调试信息 更多信息：https://developers.google.com/chrome-developer-tools/docs/tips-and-tricks#debugging-sass