Working With LESS and the Chrome DevTools

This is a complete tutorial to using LESS with Chrome's DevTools. If you've used Sass with Chrome's DevTools, you'll most likely already be familiar with the concepts introduced here.

The Short Version

LESS has very recently added support for Source Maps, so this is new and exciting!
DevTools mapping means you can view LESS styles for all your relevant CSS.
Edit LESS source files within DevTools and have them save to disk.
Source Map adoption is improving with Sass, CoffeeScript, UglifyJS2 and more.

Introduction

Not too long ago, the Chrome DevTools added a number of IDE-like features (and continues to do so), one of which is the ability to understand the mapping between a compiled file and its corresponding source file. This is made possible thanks to Source Maps.

What This Tutorial Will Cover

How to generate Source Maps from LESS files.
Debugging LESS code through the DevTools.
Authoring LESS code in the DevTools and seeing changes immediately via Workspaces and Grunt.

Everything mentioned here is available in Chrome Canary.

Configuring LESS for Source Maps

First thing's first, install the latest (1.5.1 at the time of this writing) version of LESS through NPM (Source Maps arrived in 1.5.0):

$ npm install -g less
$ lessc -v
lessc 1.5.1 (LESS Compiler) [JavaScript]

At this point, you can run the LESS compiler in your terminal using the lessc command.

Create a new LESS file. For demonstration purposes, it'll be kept short and simple.

@color: #4D926F;
#header {
  color: @color;
}

To turn the LESS file into a CSS file, it's a simple case of running:

lessc header.less header.css

We now need a Source Map file. Create it with the -source-map flag.

lessc --source-map=header.map header.less header.css

Using the LESS code shown above, running this command produces a Source Map file with the following contents:

{"version":3,"file":"header.css","sources":["header.less"],"names":[],"mappings":"AAEQ;EACP,cAAA"}

Using DevTools to Map to LESS Source Files

In a world without Source Maps, DevTools would display styles originating from the compiled CSS. Line numbering would not be useful due to a mismatch between compiled CSS and the source CSS. With Source Maps, when inspecting a DOM node on the page, DevTools will automatically show the styles originating from the LESS source file.

Viewing a web page which references the previously mentioned header.css is now inspectable in a more meaningful way.

While holding Command (Control on Windows), click any property, value or selector to jump to the line of code in the corresponding LESS source file within the Sources panel.

Authoring Workflow With DevTools & LESS

Viewing LESS code in the DevTools is certainly useful, but integrating an authoring workflow can speed up your iteration cycle. The next step is to tell DevTools how the resources on a web page map to files on a file system. Enter: Workspaces.

Note: Workspaces are suitable for many projects, not just those using CSS preprocessors.

Workspaces

You might already be familiar with the Sources panel from an editing perspective. The general idea is that you have a file navigator in the sidebar where each file is typically a stylesheet, script or HTML resource that the web page has loaded.

Clicking on a resource displays the contents in the main panel. You may notice the similarity this has with the Resources panel, however there is at least one major difference: the Sources panel contains a live editor. Changes you make to stylesheets are applied to the page instantly and changes you make to scripts are injected back into the V8 engine and evaluated immediately. Not only does this work for remotely hosted files, but also for local ones with the added benefit of persisting your changes to a file.

Note: To make use of Workspaces, the following steps are only required once per project.

Step 1.

Open up a local webpage and add its corresponding folder on your file system to the workspace by right-clicking in the Sources panel sidebar and selecting Add Folder to Workspace.

Step 2.

Allow DevTools access to the folder you've just added.

Step 3.

Your newly added folder will appear in the sidebar navigation.

Right-click on a file within a network resourced folder in the Sources panel (make sure it has an obvious mapping to a file on your file system) and select Map to File System Resource.

Step 4.

The first suggestion provided by DevTools is the correct one. It has noticed that the file on my file system (/Users/.../bootstrap.css) has the same name as a network resource file (http://localhost/.../bootstrap.css). Verify the mapping by selecting the correct resource.

DevTools now understands the mapping between filesystem resources and network resources. When you Command/Control-Click a selector from the Styles panel and end in the Sources panel, you're now being shown your actual LESS source file. You can edit a file in the Sources panel and those changes will persist to disk when you Command/Control-S.

We've come all this way, so let's complete this workflow by using a Grunt watch task to watch for changes made to the LESS files and then automatically compile our CSS and make a corresponding Source Map file.

Using Grunt to Watch & Compile LESS

With Workspaces set up, configure Grunt (or another tool of your choice) to watch for changes to LESS source files and compile a new CSS file (with a Source Map). DevTools will pick up this change automatically and apply any new styles to the page.

Note: Enable the Auto-reload generated CSS flag in the Settings panel to use this workflow.

Here is an outline of the automated steps which will occur:

You save a change to a LESS file via DevTools.
A watch task monitors LESS files for changes and then runs a LESS task.
The LESS task compiles a new CSS file plus a Source Map file.
DevTools injects the new CSS file onto the current page without a page refresh.

Here's a simplified Gruntfile:

module.exports = function(grunt) {
    'use strict';

    require('matchdep').filterDev('grunt-!(cli)').forEach(grunt.loadNpmTasks);

    grunt.initConfig({
        less: {
            dev: {
                options: {
                    sourceMap: true,
                    sourceMapFilename: 'bootstrap.map'
                },
                files: {
                    'less/bootstrap.css': 'less/bootstrap.less'
                }
            }
        },
        watch: {
            all: {
                files: ['less/**/*.less'],
                tasks: ['less'],
            }
        }
    });

    grunt.registerTask('default', ['less', 'watch']);
};

Note: The code snippet above comes from the demo repository.

After an npm install, running grunt in your terminal should show a watch task running.

DevTools already has write access to your development folder (through Workspaces). Command/Control-S your changes in the Sources panel to have DevTools overwrite the source LESS file with your new change, Grunt compiles a new CSS file which DevTools pulls in and applies to the page.

Conclusion

During development and debugging, looking at your source file (rather than the compiled file) will almost always be more useful to you.
For DevTools to understand source file mappings, it needs to be compatible with the Source Map v3 proposal which is up to the compilation tool to implement.
Tools adopting Source Maps are improving. We have Sass, Compass, LESS, autoprefixer, UglifyJS2, CoffeeScript and more. There are grunt-contrib-* tasks for most of these tools (Sass, Compass, LESS, autoprefixr, UglifyJS2, CoffeeScript) which tie in nicely with a livereload workflow.
Viewing LESS files will work out of the box with DevTools. To actually edit files, try out Workspaces which gives you the ability to persist changes to disk.

HIGHLIGHTS OF THE DAY