Chromer Developer Tools中的Sass/SCSS支持

fzwojiic  于 2023-08-01  发布在  Go
关注(0)|答案(3)|浏览(108)

在此之前,直到最近(据我所知,直到Chrome 27),Chrome开发工具在Chrome实验的帮助下,支持Sass(准确地说是SCSS)“检查”。
支持表现在能够检查站点的CSS文件,如果CSS是使用--debug-info(SCSS 3.2.7)从SCSS编译的,则在CSS面板中:
x1c 0d1x的数据
而不是CSS文件链接-你会看到相应的SCSS文件链接,你可以点击它,它会在资源中打开文件,在确切的SCSS规则,有助于CSS规则被检查(很像你可以与CSS文件)。

由于某种原因,这已经停止与(我的)最新的Chrome更新。

这对我目前正在做的工作(SCSS重组一个大型项目)很重要,所以我问:有没有人经历过同样的事情(我在所有我可以访问的机器上都有),更重要的是,有没有人知道如何修复它(而不需要寻找旧的Chrome版本)

  • 我不确定什么是正确的SE渠道,但由于它与发展有关-在这里 *

P.S. SCSS生成的路径似乎是正确的,因为在FireSASS中它们被正确地显示和访问
同样的事情发生在我尝试的任何渠道-释放,测试版,金丝雀

更新时间18.06.13

既然旧的(--debug-info)时代已经过去了,我将接受@electric_g答案作为唯一的可能性。


ymdaylpp

ymdaylpp1#

我在Chrome Canary上遇到了同样的问题,我用以下方法修复了它:
首先,我启用了对源Map的支持:Web Inspector ->设置->常规选项卡->选中“启用源Map”。
然后我安装了Sass 3.3(支持源Map),使用这里的说明http://snugug.com/musings/debugging-sass-source-maps
运行

gem install sass --pre

字符串
核对

sass -v


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

5gfr0r5j

5gfr0r5j2#

如果其他人在这里结束,要在Chrome中使用Sass的源Map,您需要首先使用--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。

tag5nh1u

tag5nh1u3#

您的Chrome可能有更新错误。如果你点击右上角的菜单,然后点击关于谷歌浏览器,你会看到你的版本(应该是31+)。我的显示旧版本和更新错误。
卸载Chrome,重新启动计算机,再次安装Chrome。
你应该有最新的工具。SASS支持在我的版本上不再是实验性的,并且默认为我打开。但你可能需要打开它:

  • 转到URL chrome://flags,然后启用开发人员工具实验。
  • 打开DevTools(右键单击网页检查元素)
  • 点击右下角的齿轮图标
  • 单击Experiments,然后单击Enable SASS Support
  • 单击常规,然后单击启用CSS源Map

相关问题