gpt4 book ai didi

css - 如何在 Chrome 中调试 LESS?

转载 作者:技术小花猫 更新时间:2023-10-29 10:33:23 38 4
gpt4 key购买 nike

看起来 LESS 调试自一年前以来已经取得了相当大的进步,我想知道有多少人有使用 Chrome/Canary 中的开发者工具进行调试的经验。

我试图确保在调试文件时,元素的 CSS 显示为 LESS 文件,而不是 CSS 文件。当我需要知道 LESS 文件的必需行号时,显示 CSS 行号几乎没有用。我可以使用 firebug 和 fireless 在 firefox 中执行此操作,但它在 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 和启用 Source Maps)

想法?

最佳答案

现在可以在 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 is on

enter image description here

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

关于css - 如何在 Chrome 中调试 LESS?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15664064/

38 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com