在 Chrome 或 Firefox 中使用 less.js 和 @media -sass-debug-info 调试 LESS答案

【问题标题】：Debugging LESS with less.js and @media -sass-debug-info in Chrome or Firefox在 Chrome 或 Firefox 中使用 less.js 和 @media -sass-debug-info 调试 LESS
【发布时间】：2014-10-14 00:57:22
【问题描述】：

根据http://lesscss.org/usage/#using-less-in-the-browser-debugging，我可以启用

<script>
    less = {
        dumpLineNumbers: "mediaquery"
    };
</script>

并在 Chrome 或 Firefox 开发工具/firebug 中调试较少，但启用此选项后，我在 Chrome 开发工具中看不到 CSS 属性和 LESS 文件之间的任何连接。我确实在生成的<style> 标签中获得了额外的@media 信息，但 Chrome 似乎只是忽略了它。例如：

@media -sass-debug-info{filename{font-family:file\:\/\/http\:\/\/localhost\/web-project\/client\/style\/global\/global\.less}line{font-family:\000031}}
body {
  font-family: Ubuntu;
}

我知道我可以在运行前编译 LESS（使用 node.js 编译器）并启用 source-map，但我喜欢使用客户端解析器来调试 less - less.js。

我缺少什么，所以我可以通过这种方式进行更少的调试？

【问题讨论】：

我认为 Chrome 根本不支持这种调试格式。 Firefox 需要 FireLss 附加组件。换句话说，现在似乎是将您的开发工作流程更改为 grunt-contrib-(less/watch/connect) 并使用源映射的好时机（每个人都将很快放弃 -sass-debug-info）。
sass-sleuth- 在 Chrome 或 Firefox 中读取 @media -sass-debug-info，它可能也适用于 Less？（给我买一个mac，我会测试它或你）

标签： html css less

【解决方案1】：

http://q42.nl/blog/post/35203391115/debug-sass-and-less-in-webkit-inspector-and-save-css-cha 描述 Chrome 24 的开发版本确实提供了一段时间的实验性支持。我预计 Chrome 会在此之后立即停止支持。

唯一可行的选项似乎是在 Firefox 中将 FireLess 与 Firebug 一起使用。如何使用 FireLess with Less v2 可以阅读：http://bassjobsen.weblogs.fm/fireless-less-v2/

如前所述，sass-sleuth 过去也提供过支持。

【讨论】：