Debugging LESS

Submitted by wilbur on Wed, 12/17/2014 - 10:37pm

I'm working on a Drupal project that is using LESS instead of SASS for CSS compiling. To get the job done, I am using Node.js to compile the LESS files locally. All fine and good, but what about actively building a site - writing, reviewing and confirming LESS changes and eventually CSS changes on the site.

BIG TROUBLES! The CSS compiler does a good job of creating a SINGLE CSS file out of the neatly organized fleet of LESS files I am using.

As with all code projects, folks smarter than me have developed an approach. As of LESS 1.5, you can now generate a source.map file, that maps the LESS file content to it's location in the CSS files. And farther downstream, Chrome Dev Tools and Firefox Developer Tools are ready and looking to integrate your source.map to show you just where your markup is coming from.

The unfortunate exceptions is that you still can't access your source maps in Firebug! There is an open support request, but until they have more developer resources, this is not implemented yet. (https://code.google.com/p/fbug/issues/detail?id=7419) As Firefox works to implement Developer Tools natively in Firefox, Firebug's future gets murkier.

So let's get setup! We need to:

Create source maps everytime we are compiling our LESS files

Configure Chrome Dev Tools and Firefox Developer Tools to look for and load the results of our source.map

Creating Source Maps with LESS

Because I'm using Node.js to compile by LESS files, I am running the compile command from the command line. Being the lazy-accurate sort that I am, I stopped trying to remember my command for compiling LESS and wrote a bash command to do the work for me. The basic syntax for compiling your LESS commands is:

~> lessc <source> <destination>

To add the source.map compiling in there, just add this option:

~> lessc --source-map <source> <destination>

The less compiler will automatically create the source.map in the same directory as your destination CSS files. Being the lazy-accurate type I am, I set absolute paths to my source and destionation files so my command looks like this:

By making an absolute path call, I can run my command from any directory. That's accurate AND lazy!

Configure Chrome Dev Tools to look for source.maps

Chrome Dev Tools

Click the config wheel to open settings and check 'Enable CSS Source Maps'

I also checked 'Auto Reload Generated CSS'

Here's a screenshot:

Configure Firefox Developer Tools to show source.maps

Open Firefox developer tools.

In the inspector, right click anywhere on the open list in the Rules panel.

Toggle between "Show CSS Sources" and "Show Original Sources"

Conclusion

SASS and LESS have given us powerful tools for building better CSS and building it faster. Now we have developer tools to leverage this technology and provide use with debugging that is just as powerful and quick!