Chrome 开发者工具中的 Sass/SCSS 支持答案

【问题标题】：Sass/SCSS support in Chromer Developer ToolsChrome 开发者工具中的 Sass/SCSS 支持
【发布时间】：2013-04-11 03:54:44
【问题描述】：

以前，直到最近（据我所知，直到 Chrome 27），Chrome 开发工具在 Chrome Experiments 的帮助下，都支持 Sass（准确地说是 SCSS）“检查”。

这种支持体现在能够检查网站的 CSS 文件，如果 CSS 是使用 --debug-info (SCSS 3.2.7) 从 SCSS 编译的，那么在 CSS 面板中：

而不是 CSS 文件链接 - 您会看到相应的 SCSS 文件链接，您可以单击它，它会在资源中打开文件的确切 SCSS 规则，该规则有助于检查 CSS 规则（就像您可以使用CSS 文件）。

无论出于何种原因，这已停止使用（我的）最新的 Chrome 更新。

这对我目前正在做的工作（大型项目的 SCSS 重组）很重要，所以我想问：有没有人有同样的经历（我在我可以访问的所有机器上都有），更重要的是， 有谁知道如何修复它（无需寻找旧版 Chrome）？

我不确定什么是合适的 SE 渠道，但由于它与开发有关 - 就在这里

附： SCSS 生成的路径似乎是正确的，因为在 FireSASS 中它们可以正确显示和访问

在我尝试过的任何渠道上都会发生同样的情况 - Release、Beta、Canary

更新 18.06.13

既然过去的 (--debug-info) 日子似乎一去不复返了，我将接受@electric_g 的回答作为唯一的可能性。

【问题讨论】：

【解决方案1】：

我在 Chrome Canary 上遇到了同样的问题，我通过以下方式修复了它：

首先我启用了对源地图的支持：Web Inspector -> 设置 -> 常规选项卡 -> 选中“启用源地图”。

然后我使用http://snugug.com/musings/debugging-sass-source-maps 此处的说明安装了 Sass 3.3（支持源映射）：

运行

gem install sass --pre

检查

sass -v

至少有 Sass 3.3.0.alpha.101 然后在编译文件时使用--sourcemap flag 而不是--debug-info/-g。

【讨论】：

由于各种原因，我无法升级或更改现有安装。我可以同时拥有 2 个 SASS 版本吗？
我对 ruby 和 gems 不是很熟悉，但是在 Google 上快速搜索后，我发现了这个 rvm.io/gemsets/basics "RVM 为您提供了独立的 ruby 设置。这意味着 ruby、gems 和 irb 是所有这些都是独立的和独立的 - 来自系统，也来自彼此。”
这可能是真的，但是在运行sass ... 时会调用哪一个，假设你真的可以并排运行它们。
Ben 有一篇关于其工作原理的更新帖子：benfrain.com/… 如果您想尝试一个有效的实现，html5please.com 也启用了真正的源映射。
不幸的是，这不适用于 Compass yet。一种选择是使用 Firebug 而不是 Chrome 开发工具。

【解决方案2】：

如果其他人在这里结束，要在 Chrome for Sass 中使用源映射，您需要先使用 --sourcemap 标志来生成它们！

sass --watch --sourcemap --debug-in sass/screen.scss:screen.css

--debug-info 标志用于 FireSass。

【讨论】：

【解决方案3】：

您的 Chrome 可能存在更新错误。我你点击右上角的菜单，然后点击关于谷歌浏览器，你会看到你的版本（应该是 31+）。我的显示旧版本和更新错误。

卸载Chrome，重启电脑，重新安装chrome。

您应该拥有所有最新的工具。 SASS 支持在我的版本上不再是实验性的，并且默认为我打开。但您可能必须打开它：

【讨论】：