How to debug LESS in Chrome?

Question

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?

Answer 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

Answer 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.