如何在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 和启用源映射）。

有什么想法吗？

- Duncan

---

在Google Chrome 27.0.1453.110 (Linux)中是一样的。 - Dmitry

在Chrome版本27.0.1453.116 m（Windows）上相同的事情。 - DATEx2

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时确保启用了开发者工具实验。

更多细节请参见：https://github.com/less/less.js/issues/1050

- WooDzu

Answer 2

博客文章的作者在这里...我已经回去更新了我的文章，所以现在它可以与常规的Chrome 26一起使用。刚才检查了一下金丝雀版本，它似乎不再起作用了。因此，Chrome 24-26是好的，但金丝雀版本有问题。

- robdodson

Answer 3

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

据我所知，你是在服务器端编译LESS文件，而你想做的只是获取新的CSS文件而不是缓存的文件，对吗？

你试过在Google Chrome上禁用缓存了吗？

- Rui Carneiro

---

抱歉如果我表达不清：我想确保在调试文件时，元素的CSS显示为LESS文件，而不是CSS文件。当我需要知道所需LESS文件的行号时，CSS行号的显示几乎没有用处。我可以在Firefox中使用Firebug和Fireless来实现这一点，但在Chrome中无法正常工作。 - Duncan

这个评论比你的原始帖子清晰得多。请考虑编辑原始帖子 :) - Rui Carneiro