How to debug LESS in 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?

回答1:

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

回答2:

Blog post author here...I've gone back and updated my post so it now works with regular Chrome 26. Just checked in Canary and it doesn't seem to work anymore. So Chrome 24 - 26 are good but Canary is busted.

回答3:

I think that the issues that you refer are not related.

As far as I understand you compile your LESS file on the server side and all you want to do is to retrieve the new css file and not the cached one? Am I right?

Did you tried disable cache on google chrome?