css - 如何在 Chrome 中调试 LESS？

Question

从一年前开始，LESS 调试似乎已经取得了长足的进步，我想知道有多少人有使用 Chrome/Canary 中的开发人员工具进行调试的经验。

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

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

我正在运行 OSX，通过 node.js 安装了 LESS，并且正在使用 ST2 插件 Less2CSS 来处理保存时的 less 文件。使用该命令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 文件末尾生成有效的源映射 url：

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

并且浏览器正在加载.css.map文件。如果由于某种原因这仍然不适合您，请检查 chrome://flags Enable Developer Tools Experiment是否已开启

更多细节在这里：https ://github.com/less/less.js/issues/1050

Answer 2

博客文章作者在这里...我已经返回并更新了我的帖子，因此它现在可以与常规 Chrome 26 一起使用。刚刚签入 Canary，它似乎不再工作了。所以 Chrome 24 - 26 很好，但 Canary 被破坏了。

Answer 3

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

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

你试过在谷歌浏览器上禁用缓存吗？