Chrome 开发工具/Firebug 中的 Less/Sass 调试 [关闭]答案

【问题标题】：Less/Sass debugging in Chrome Dev Tools/Firebug [closed]Chrome 开发工具/Firebug 中的 Less/Sass 调试 [关闭]
【发布时间】：2012-04-09 13:17:28
【问题描述】：

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

我喜欢 Dev Tools/Firebug 的一个特点是能够查看 CSS 样式的行号。除了必须手动搜索 .less/.scss 文件来查找我要修改的代码之外，有没有使用 CSS 预处理器的好方法？

【问题讨论】：

这是一个完整的教程，可帮助您设置开发环境，以便在自动编译为 css 后在 webkit 检查器中调试 Less 和 Sass。如果您愿意，它甚至解释了如何将 CSS 更改从 Chrome 中直接保存回您的 css 文件。 blog.q42.nl/post/35203391115/…
又一个重要问题以“不具建设性”而结束。我希望这些人不要仅仅关闭他们不理解的问题。我正在使用 LESS 并且完全同意 OP 并且（尽管有解决方法）我希望 LESS 可以选择在生成的 CSS 中保留行号。
为什么这“没有建设性”？我在谷歌上搜索了这个，这是我的确切问题，很高兴我找到了。也有很好的答案
我认为这个问题如果错过了最后一句话，可能会避免锁定。最后一句话是可以引起辩论等的。我不是在证明或同意锁定（毕竟，我提出这个问题是因为我关心答案）......只是指出可能导致它超出界限的原因。
@GreenAsJade 我同意最后一句话可能会引起辩论，所以我将其删除。希望这个问题可以重新打开。

标签： css sass less source-maps

【解决方案1】：

如果您正在选择应该使用哪个，this article on 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 has been discontinued.

Chrome/Webkit 版本已经在网络上出现，并且 Chrome 中有一个 beta 功能来添加对 SASS 调试的支持。它基于 Firefox 版本中使用的相同调试信息。到目前为止，还无法正确判断它们中的任何一个，也没有找到在撰写本文时被公开接受为该工作的插件的东西。

LESS / 手写笔

正如this tweet @jaketrent 指出的那样，chrome 的调试方面取得了进展，但还没有任何进展，鉴于 LESS github 的状态，它可能还需要一段时间......这两种解决方案都基于chrome 中支持 SASS 调试的 beta 功能，基本上添加了与 SASS 相同的调试信息。

【讨论】：

酷！多谢你们。是的，良好的代码组织 + 命名约定似乎会有很长的路要走。
注意：最新版本的 chrome 开发工具有实验性的 SASS 支持。
这是另一个extension for chrome。虽然在GitHub 上，作者说它仍然有一些错误......
上述扩展的问题是它必须创建一个单独的 Sass 窗格，而不是简单地扩展现有的 CSS 窗格。我们 (@mobify) 为我们刚刚向世界发布的 Webkit 浏览器提供了一个替代解决方案，请在此处查看：mobify.com/dev/sass-sleuth-debugging-sass-in-webkit-browsers。
中断：Less will now expose Sass-style debug info in Chrome

【解决方案2】：

Chrome 开发者工具现在支持开箱即用的 Sass 调试。

更新为包含源地图：
以前的版本在你的 CSS 中使用内联注释来提供对源代码的引用（参见下面的操作方法）。 sass (3.3+) 和 chrome (31+) 的最新版本为此使用源映射：

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

Chrome 开发工具博客上提供了更多信息： https://developers.google.com/chrome-developer-tools/docs/css-preprocessors

旧版本：
1. 首先，你应该在打开--debug-info 的情况下编译你的Sass。
2. 在 Chrome/ium 中转到 about:flags
3. 启用开发者工具实验
4. 在检查器 (F12) 中，打开“设置”，然后转到“实验”选项卡并检查“对 SASS 的支持”。

【讨论】：

如果您使用 Compass，请将 sass_options = {:debug_info => true} 添加到您的 config.rb 文件中。
我相信具体设置已经从Support for SASS重命名为Enable source maps。
在我的 config.rb 文件中 sass_options = {:debug_info => false} line_comments = true 仍然有效，css 文件没有那么混乱。
任何想法是否仅适用于 .scss 语法而不适用于 .sass？
如果其他人在努力使 Chrome 与 Sass 一起工作后最终出现在这里，您需要运行不同的命令来通过命令行生成源映射：sass --watch --sourcemap sass/styles。 scss:styles.css 而不是 --debug-info。

【解决方案3】：

因为 firesass，我从 less 切换到 sass。有了这个，你就得到了 firebug 中的原始 sass 行。

如果你使用 sass，请安装 firesass

【讨论】：

【解决方案4】：

一些提示：

在版本控制中包含 .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 命令中，为--debug-info 添加一个-g，以便它输出插件运行所需的挂钩。

【讨论】：

【解决方案5】：

我很少遇到 LESS 中的维护/调试问题——我们总是在服务器端编译并且只引用 HTML 页面中的 CSS 文件。这使得它始终与网页和磁盘上的文件一一对应。

然后，当我必须编辑 LESS 文件时，我发现 LESS，因为它几乎包含 CSS+额外标记，所以很容易将我对 CSS 中的原始语句感到困惑的任何内容进行回溯。如果它是一个 mixin，那就很明显了（因为我通常使用 mixins 来避免重复做所有供应商前缀的东西），然后它只是一个逻辑层次结构，因为我们使用了类嵌套功能，所以找到：

div#awesome aside ul

很容易找到：

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

（尽管我们尽量不超过 3 层）

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

【讨论】：

SASS 也是一样的，这几天长得这么像真吓人； LESS 从 SASS 窃取，我认为反之亦然，在 LESS 底部颜色函数所在的某个地方遇到 SASS 的版权标记很有趣。
@sg3s 啊，我只在它有（缩进语法）[sass-lang.com/docs/yardoc/file.INDENTED_SYNTAX.html] 时才看到它，这对我来说已经足够删除了，不值得。永远不要看到 SASS 版权标记。（而且快速的 ctrl-f 什么也没显示。）我一直认为 SASS 的新 CSS 模式是 LESS 受欢迎程度的一个功能。无论哪种方式，它们都非常有用！