Google+
4elements web design & consultancy

Shineyrock

web design & consultancy
Shineyrock web design & consultancy

Shineyrock

  1. web design and consultancy

blog

  1. Home
  2. blog
  3. read
  4. Working With LESS and the Chrome DevTools
  • 21

    Working With LESS and the Chrome DevTools

    1. January 2014
    2. Daily
    3. read 892

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

    The Tl;dr

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

    image_0-2

    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]
    image_1

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

    image_2

    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
    image_3

    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.

    image_4

    While holding Command (Ctrl 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.

    image_6

    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.

    image_7

    Step 2.

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

    image_8

    Step 3.

    Your newly added folder will appear in the sidebar navigation.

    image_9

    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.

    image_10

    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.

    image_11

    DevTools now understands the mapping between filesystem resources and network resources. When you Cmd/Ctrl-Click a selector from the Styles pane 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.

    image_12

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

    1. You save a change to a LESS file via DevTools.
    2. A watch task monitors LESS files for changes and then runs a LESS task.
    3. The LESS task compiles a new CSS file plus a Source Map file.
    4. 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.

    image_13

    DevTools already has write access to your development folder (through Workspaces). Cmd/Ctrl+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.

    Further Reading

    Source Maps

    LESS

    Chrome DevTools

    Photo

    martijn broeders

    founder/ strategic creative at shineyrock web design & consultancy
    e-mail: .(JavaScript must be enabled to view this email address)
    phone: 434 210 0245
    0
    Add a comment...
    4elements
    Comments

By - category

By - date

Copyright © 1999 - 2026 Shineyrock web design and consultancy, All Rights Reserved / Terms of Conditions / Sitemap: XML, HTML, Images, Mobile, News