如何在Chrome中调试LESS？

Question

看起来LESS调试距离一年前还有一段不错的距离，我想知道有多少人有使用Chrome / Canary中的开发工具进行调试的经验。

我正在努力确保在调试文件时，元素的CSS显示为LESS文件，而不是CSS文件。当我需要知道LESS文件的必需行号时，显示CSS行号很有用。我可以使用firebug和fireless在firefox中执行此操作，但它不适用于chrome

我尝试按照here的步骤操作，但即使仔细按照说明操作，它似乎也无法正常运行。

我正在运行OSX，通过node.js安装LESS，并使用ST2插件Less2CSS以便在保存时处理较少的文件。使用命令lessc --line-numbers=mediaquery style.less style.css按预期工作并将其写入我的css文件@media -sass-debug-info{filename{font-family:file\:\/\/\/Applications\/XAMPP\/xamppfiles\/htdocs\/sandbox\/lessDebug\/style\.less}line{font-family:\000035}}的顶部，但是在检查元素时，它仍然只捕获CSS文件，而不是LESS文件。

我已启用必备的Chrome偏好设置（支持SASS和启用源地图）

思想？

Answer 1

现在使用less.js 1.5b4和Chrome 30.0.1599.69

完全正常

基本上，您需要确保lessc在您的css文件末尾生成有效的源地图网址：

/*# sourceMappingURL=/templates/lwks/css/template.css.map */

并且浏览器正在加载 .css.map 文件。如果由于某种原因这仍然不适合您，请检查chrome：// flags 启用开发人员工具实验是否已启用

更多详细信息：https://github.com/less/less.js/issues/1050

Answer 2

博客文章作者在这里...我已经回去更新我的帖子，所以它现在适用于普通的Chrome 26.只需检查Canary和它似乎不再起作用。所以Chrome 24 - 26很好，但Canary被破坏了。

Answer 3

我认为您提到的问题并不相关。

据我所知，您在服务器端编译LESS文件，而您想要做的就是检索新的css文件而不是缓存的文件？我是对的吗？

你试过disable cache on google chrome吗？