google-chrome - Chrome 中的 Sass 源映射不起作用。一头雾水

Question

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

使用 Sass 3.3.0.alpha.198(我听说是“出血边缘”)，我成功地生成了一个源映射文件( test.css.map )，该文件与我编译的 CSS 一起放置；在编译好的 CSS 的底部是一行:/*# sourceMappingURL=test.css.map */ .所以这一步似乎进展顺利。

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

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

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

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

Answer 1

您是从 file://URL 加载页面吗？出于安全原因，这不起作用 - 在本地主机上使用任何 http 服务器。

此外，更新您的 Canary 是个好主意； CSS 源映射已经从实验中毕业。您应该在常规设置中选中“启用 CSS 源映射”。