4

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?

2
  • anything for chrome?
    – chefnelone
    Apr 30, 2012 at 15:47
  • There was a bit much info for a comment, I've put it in an answer
    – Clive
    Apr 30, 2012 at 15:52

2 Answers 2

2

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)

2
  • I see. I sadly have to say then that Less is useless for me.
    – chefnelone
    Apr 30, 2012 at 16:05
  • Yup, I feel your pain; this is the main reason I haven't started using LESS/SASS yet as well :/
    – Clive
    Apr 30, 2012 at 16:38
0

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);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.