如何在Chrome中调试LESS？ [英] How to debug LESS in Chrome?
问题描述
看起来就像一年前LESS调试已经有了一个不错的距离，我想知道有多少人有调试在Chrome / Canary使用开发工具的经验。
我试图确保当我调试一个文件时，元素的CSS显示为LESS文件，而不是CSS文件。当我需要知道LESS文件的必要行号时，显示CSS行号很少用。我可以在firefox用firebug和fireless，但它不工作在chrome
这样做。我试着按照步骤
It looks as though LESS debugging has come a decent distance since even a year ago, and I was wondering how many people have experience with debugging using developer tools in Chrome/Canary.
I'm trying to ensure that when I'm debugging a file, the element's CSS shows up as the LESS file, rather than the CSS file. It's of little use to have CSS line numbers show up, when I need to know the requisite line number of the LESS file. I can do this in firefox with firebug and fireless, but it's not working in chrome
I tried to follow the steps here, however it doesn't appear to be functioning for me correctly even after following the instructions carefully.
I'm running OSX, have LESS installed via node.js, and am using the ST2 plugin Less2CSS in order to process the less file on save. Using the command lessc --line-numbers=mediaquery style.less style.css works as expected and writes this to the top of my css file @media -sass-debug-info{filename{font-family:file\:\/\/\/Applications\/XAMPP\/xamppfiles\/htdocs\/sandbox\/lessDebug\/style\.less}line{font-family:\000035}}, however when inspecting an element, it's still only catching the CSS file, and not the LESS file.
I have the requisite Chrome preferences turned on (Support for SASS and Enable Source Maps)
Thoughts?
This is now working perfectly fine with less.js 1.5b4 and Chrome 30.0.1599.69
Basically, you need to make sure lessc generates valid source map url at the end of your css file:
/*# sourceMappingURL=/templates/lwks/css/template.css.map */
and that the .css.map file is being loaded by the browser. If this is still for some reason not working for you, in check chrome://flags Enable Developer Tools experiments is on
more details here: https://github.com/less/less.js/issues/1050
这篇关于如何在Chrome中调试LESS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
