首页 文章

Chromer Developer Tools中的Sass / SCSS支持

提问于
浏览 次
18

以前，直到最近的时间（据我所知，直到Chrome 27），Chrome开发工具在Chrome实验的帮助下，支持Sass（SCSS准确）“检查” .

支持体现在能够检查站点的CSS文件以及CSS是否使用 --debug-info （SCSS 3.2.7）从SCSS编译，然后在CSS面板中：

enter image description here

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

For whatever reason, this has stopped working with (my) latest Chrome update.

这对我目前正在做的工作很重要（SCSS重组一个大型项目）所以我问：有没有人经历过同样的事情（我在所有可以访问的机器上都有它），更重要的是， does anyone know how to fix it (without hunting down older Chrome versions) ？

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

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

我试过的任何 Channels 都会发生同样的情况 - 发布，测试版，金丝雀

Update 18.06.13

由于似乎旧的（ --debug-info ）日子已经过去，我将接受@electric_g答案作为唯一的可能性 .

Sass support in experiments

google-chrome sass google-chrome-devtools

3 回答

  • 1

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

    首先，我启用了对源映射的支持：Web Inspector - > settings - > General选项卡 - >选中“启用源映射” .

    然后我使用这里的说明http://snugug.com/musings/debugging-sass-source-maps安装了Sass 3.3（它支持源 Map ）：

    跑

    gem install sass --pre

    检查

    sass -v

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

    回复于
  • 2

    如果其他人在这里结束，要在Chrome中使用源代码 Map 以获取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 .

    回复于
  • 11

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

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

    你应该拥有所有最新的工具 . SASS支持在我的版本上不再具有实验性，默认情况下对我开启 . 但你可能需要打开它：

    • 转到URL chrome：// flags然后启用Developer Tools实验 .

    • 打开DevTools（右击网页检查元素）

    • 单击右下角的齿轮图标

    • 单击“实验”，然后单击“启用SASS支持”

    • 单击“常规”，然后单击“启用CSS源映射”

    回复于

相关问题