How to inspect a css file generated by Less?

Question

I just get running Less in a drupal site. I was exited until I try to inspect a css file generated by a less file.

The line numbers in the generated css file don't match the the line numbers in the less file.

Even though this is very understandable since the css file is a generated file, this is a big problem to me. I'm very used to inspect (using Chrome) to look for the line number of the style of the inspected element,then I would go to css file to look for this line and make the changes I need.

Now with less this is imposible

How do you manage this?

Answer 1

There are extensions available for Firefox (sadly not for any other browsers that I can find).

There's the FireLess Plugin which is:

a Firebug extension that makes Firebug display the Less filenames and line numbers of LessPHP-generated CSS styles rather than those of the generated CSS

Also, if you're able to switch to using SASS (which is quite similar), there's FireSass, which:

allows Firebug to display the original Sass filename and line number of Sass-generated CSS styles.

There's nothing for Chrome at the moment (see Less/Sass debugging in Chrome Dev Tools/Firebug)

Answer 2

Add this line to the LESS source code at line 672

loadStyleSheets(function (e, css, _, sheet, webInfo) { if (e) { errors.add(e, e.href || sheet.href); reject(e); }

        /*--->>>> THIS LINE---->>>*/ window.__lastCSS = css;


        if (webInfo.local) {
            less.logger.info("loading " + sheet.href + " from cache.");
        } else {
            less.logger.info("rendered " + sheet.href + " successfully.");
            css = postProcessCSS(css);
            browser.createCSS(window.document, css, sheet);
            cache.setCSS(sheet.href, webInfo.lastModified, css);
        }
        less.logger.info("css for " + sheet.href + " generated in " + (new Date() - endTime) + 'ms');
        if (webInfo.remaining === 0) {
            totalMilliseconds = new Date() - startTime;
            less.logger.info("less has finished. css generated in " + totalMilliseconds + 'ms');
            resolve({
                startTime: startTime,
                endTime: endTime,
                totalMilliseconds: totalMilliseconds,
                sheets: less.sheets.length
            });
        }
        endTime = new Date();
    }, reload, modifyVars);