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

Question

23

以前，在最近的时候（据我所知，直到Chrome 27之前），Chrome Development Tools在Chrome Experiments的帮助下支持Sass（确切地说是SCSS）“检查”。

支持体现在能够检查网站的CSS文件，如果CSS是使用-debug-info编译自SCSS（SCSS 3.2.7），则在CSS面板中：

enter image description here

你会看到相应的SCSS文件链接，你可以点击它，它会在资源中打开文件，并显示CSS规则被检查时SCSS规则的确切位置（就像CSS文件一样）。

由于某种原因，这在最新的Chrome更新（我的版本）中停止了运作。

这对我目前正在进行的工作很重要（对一个大型项目进行SCSS重新组织），因此我想问：是否有人遇到过同样的问题（我在所有可以访问的计算机上都遇到了这个问题），更重要的是，有没有人知道如何修复它（而不是寻找旧的Chrome版本）？

我不确定什么是适当的SE渠道，但由于它涉及到开发 - 在这里

P.S. SCSS生成的路径似乎是正确的，因为在FireSASS中它们被正确显示和访问

我尝试了任何渠道 - 发布版、Beta版、Canary版都是一样的。

更新18.06.13

由于旧的（--debug-info）已经不可用了，我将接受@electric_g的答案作为唯一的可能性。

Sass support in experiments

- ZenMaster

我现在找不到参考资料了，但我记得看到过有关调试信息格式更改的内容。虽然我认为这不应该出现在当前版本的Sass中。 - cimmanon

是的，我非常确定这是3.3版本中--sourcemap支持的原因。 - ZenMaster

更好的答案在https://dev59.com/e4Dba4cB1Zd3GeqPJtxI。 - tog22

1

@tog22 我8年前的问题？ - ZenMaster

3个回答

2

如果其他人也来到这里，想要在Chrome中使用Sass的源映射，你需要先使用--sourcemap标志来生成它们！

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

- Jason Lydon

1

您的Chrome可能存在更新错误。如果您点击右上方的菜单，然后点击关于Google Chrome，您将看到您的版本（应该是31+）。我的显示了旧版本和更新错误。

卸载Chrome，重新启动计算机，再次安装Chrome。

您应该拥有所有最新的工具。在我的版本中，SASS支持不再是实验性的，并且默认情况下已经打开。但您可能需要打开它：

- 转到URL chrome://flags，然后启用开发人员工具实验。 - 打开DevTools（右键单击网页检查元素） - 单击右下角的齿轮图标 - 单击实验，并单击启用SASS支持 - 单击常规，并单击启用CSS源映射

- Brian Lewis

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- electric_g · Accepted Answer

我在Chrome Canary上遇到了相同的问题，并通过以下方式解决：

首先启用了源映射的支持：Web检查器->设置->通用选项卡->勾选“启用源映射”。

然后按照这里找到的说明安装了支持源映射的Sass 3.3：http://snugug.com/musings/debugging-sass-source-maps：

运行

gem install sass --pre

核对

sass -v

如果要使用源映射（sourcemap），需要至少安装Sass 3.3.0.alpha.101版本，并在编译文件时使用--sourcemap flag标记，而不是--debug-info/-g。