如何在 Chrome 中调试 LESS？答案

【问题标题】：How to debug LESS in Chrome?如何在 Chrome 中调试 LESS？
【发布时间】：2013-03-17 20:12:14
【问题描述】：

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

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

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

我正在运行 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 和启用源地图）

想法？

【问题讨论】：

Google Chrome 27.0.1453.110 (Linux) 中的相同内容
Chrome 版本 27.0.1453.116 m (Windows) 上的相同

标签： css debugging google-chrome less source-maps

【解决方案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 Experiments 是否开启

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

你试过disable cache on google chrome吗？

【讨论】：

对不起，如果我不清楚：我试图确保在调试文件时，元素的 CSS 显示为 LESS 文件，而不是 CSS 文件。当我需要知道 LESS 文件的必要行号时，显示 CSS 行号没什么用。我可以在 firefox 中使用 firebug 和 fireless 做到这一点，但它在 chrome 中不起作用
这条评论比你原来的帖子更清楚。请考虑编辑 OP :)