23

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

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

在此处输入图像描述

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

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

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

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

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

在我尝试过的任何渠道上都会发生同样的情况 - 发布、测试版、金丝雀

更新 18.06.13

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

实验中的 Sass 支持

4

3 回答 3

12

我在 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

于 2013-04-12T10:31:17.590 回答
2

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

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

更多信息：https ://developers.google.com/chrome-developer-tools/docs/tips-and-tricks#debugging-sass

该--debug-info标志用于 FireSass。

于 2013-10-25T16:56:57.560 回答
1

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

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

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

  • 转到 URL chrome://flags 然后启用开发者工具实验。
  • 打开 DevTools（右键单击网页检查元素）
  • 点击右下角的齿轮图标
  • 单击实验，然后单击启用 SASS 支持
  • 单击常规，然后单击启用 CSS 源映射
于 2013-11-21T08:25:12.963 回答