Chrome Dev Tools/Firebug中的Less/Sass调试

Question

Chrome Dev Tools/Firebug中的Less/Sass调试

60

你们如何对使用Less/Sass构建的CSS进行维护？

我喜欢Dev Tools/Firebug的一个功能，即可以查看css样式的行号。除手动搜索.less/.scss文件以查找要修改的代码外，是否有其他好方法可以做到这一点？

- Dave Stibrany

这是一篇完整的教程，帮助您设置开发环境，使得在自动编译为CSS后，可以在Webkit Inspector中调试Less和Sass。它甚至解释了如何直接从Chrome中将CSS更改保存回CSS文件。http://blog.q42.nl/post/35203391115/debug-sass-and-less-in-webkit-inspector-and-save-css-cha - Martin Kool

9

又一个重要的问题被关闭为“不构成建设性意见”。我希望这些人不要仅仅因为他们不理解就关闭问题。我正在使用LESS，并完全同意原作者的观点（尽管有解决方法），我希望LESS有一个选项可以在生成的CSS中保留行号。 - Aximili

8

为什么这个问题是“不建设性”的？我在谷歌上搜索了这个问题，这正是我的问题，很高兴找到了答案。同时也有很好的回答。 - esther h

我认为如果去掉最后一句话，这个问题可能就避免了被锁定。最后一句话可能会引发辩论等。我并不是在为锁定辩护或者赞同它（毕竟我来到这个问题是因为我关心答案）……只是指出那句话很可能是导致锁定的原因。 - GreenAsJade

@GreenAsJade 我同意最后一句话可能会引起争议，所以我把它删掉了。希望这个问题可以重新开放。 - Dave Stibrany

由于源映射，这个问题现在有了更好的答案。@DaveStibrany 虽然我当时给出的答案还可以，但请将已接受的答案更改为 tsi 的答案 :) - sg3s

5个回答

28

如果你正在选择使用哪种技术，可以参考这篇来自css-tricks的文章。

我发现使用LESS或SASS比不用更有优势。虽然这显然是一个缺点，但我建议您合理地构建文件结构，以便通过其他引用轻松找到所需的样式，以下是一些方法：

对样式表中的各个区域进行文档化;例如：/* General */, /* Header */和/* Footer */
为类使用逻辑和明智的名称，以便您可以快速识别它们(不要像error1-error10之类的编号)
学习分解类/元素/id选择器，并考虑如何在何处编写它们。
使用CTRL+F，通常可以通过这种方式找到精确的属性或附近的一个属性

SASS

现在有一种方法可以使用Firefox扩展程序来调试SASS，它可以读取并在Firebug检查器中显示SASS文件。要使用，安装扩展程序并启用相应的调试标志。

https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/

编辑：自2014-07-06起，无法下载此插件。 FireSass已停止支持。

Chrome/Webkit版本在网上出现了很多，并且有一个beta功能可以添加对SASS调试的支持，它基于Firefox版本中使用的相同调试信息。截至目前为止，还没有找到公认的、适合这项工作的插件。

LESS / STYLUS

如这条推文@jaketrent所指出的那样，Chrome浏览器的调试功能正在进展中，但目前还没有完全成熟的解决方案。考虑到LESS Github的状态，可能仍需要一些时间... 这两个解决方案都基于beta版本的SASS调试支持功能，在Chrome浏览器中添加了与SASS相同的调试信息。

- sg3s

2

注意：最近版本的Chrome开发工具具有实验性的SASS支持。 - Nico Burns

2

上述扩展的问题在于它必须创建一个单独的Sass面板，而不是简单地扩展现有的CSS面板。我们(@mobify)为Webkit浏览器提供了另一种解决方案，刚刚发布到了全世界，请点击这里查看: http://www.mobify.com/dev/sass-sleuth-debugging-sass-in-webkit-browsers/. - shawnjan

7

最新消息：Less现在将在Chrome中公开展示类似Sass的调试信息。 - jaketrent

@jaketrent - 整个页面中最有用的评论。谢啦。 - Robin Winslow

开始学习CSS源代码映射和浏览器内Sass编辑。该文章链接为：https://medium.com/what-i-learned-building/b4daab987fb0，并且还有一个关于在Chrome中调试Sass的链接。 - PAEz

显示剩余2条评论

1

我很少在LESS中遇到维护/调试问题 - 我们总是在服务器端编译并仅在HTML页面中引用CSS文件。这样，网页和磁盘上的文件之间始终存在一对一的对应关系。

然后，当我需要编辑LESS文件时，我发现LESS非常容易追溯任何让我感到困惑的内容到CSS中的原始语句，因为它基本上是CSS + 额外的标记。如果它是一个mixin，那么它就很明显（因为我通常使用mixin来防止重复做所有供应商前缀的事情），然后它只是一个逻辑层次结构，因为我们使用类嵌套功能，所以找到：

div#awesome aside ul

就像找到：

div#awesome{
    aside{
        ul{
            padding: 0;
        }
    }
}

（尽管我们尝试不超过3层深度）

我没有真正的SASS经验，但我不喜欢几年前第一次看它时与CSS相去甚远的感觉（之后就再也没有回来过...）

- tkone

SASS和LESS非常相似，现在它们看起来如此惊人；LESS从SASS中窃取，反之亦然，有趣的是，在颜色函数所在的LESS底部某处遇到了SASS版权标记。 - sg3s

@sg3s 啊，我只看到它有（Indented Syntax）[http://sass-lang.com/docs/yardoc/file.INDENTED_SYNTAX.html]，这已经足够让我不值得去了解了。虽然从来没有看到过SASS的版权标志。（快速ctrl-f搜索也没有找到）。我一直认为SASS的新CSS模式是LESS流行的一个功能。无论哪种方式，它们都非常有用！ - tkone

1

一些提示：

将 .sass 和 .css 文件都包含在版本控制中。这样每个人都能拥有最新的更改。
如果您将样式表组织成逻辑区域，则维护变得很容易。
另外：尝试使用少于三种主要颜色，然后使用 SASS 颜色函数对其进行修改，并将结果存储在可以在整个设计/主题中重复使用的变量中。

例如： $chartreuse: #7fff00 $olive: darken($chartreuse, 32%)

这样，您只需要维护一个颜色。其余的将被重新计算。

直到最近，浏览器中没有SASS调试工具。

现在有一个名为FireSASS的Firefox插件（https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/）

在您的sass --watch命令中，添加-g用于--debug-info，以便它输出插件运行所需的钩子。

- Benxamin

1

我从less转换到sass，因为有firesass。

使用firesass，您可以在firebug中获取原始的sass行。

如果您使用sass，请安装firesass。

- yvess

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

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

- tsi · Accepted Answer

Chrome开发者工具现在原生支持Sass调试。

更新以包括源映射：
以前的版本使用你的CSS中的内联注释提供源代码参考（请参见下面的how-to）。最近的sass（3.3+）和chrome（31+）使用源映射来实现：

确保您拥有Sass 3.3.x
使用--sourcemap标志编译Sass。
打开设置并单击常规，进入Chrome/ium DevTools。
启用“启用CSS源映射”。

更多信息可在Chrome dev tools博客上找到： https://developers.google.com/chrome-developer-tools/docs/css-preprocessors

旧版本：
1.首先，您应该打开--debug-info编译Sass。
2.在Chrome / ium中打开about：flags
3.启用开发人员工具实验
4.在检查器（F12）中，打开“设置”，然后转到“实验”选项卡，并勾选“支持SASS”。