Debugging Less in browsers

A key part of developing code of any description is the fixing of any errors or bugs; working with Less code is no exception. We can, of course, do this manually or use a linting tool such as CSS Lint ( CSS code, which will make it harder to trace a fault back to your existing Less code.

Fortunately, we have a couple of options that will help in this respect—we can either debug directly in Firefox using the FireLESS plugin, or we can set up a source map that will translate a compiled style back to the line number in the original Less file. Let's take a look at installing FireLESS first and get ready for when we start developing code in the next chapter.

Debugging the Less code using Firefox

To enable support for debugging Less in Firefox, we first need to ensure that Firebug is installed; for this, you can download it from https://addons.mozilla.org/en-US/firefox/addon/firebug using the normal installation process for Firefox add-ins.

At the time of writing this, the latest version of Firebug is 1.12.5, which will work for Firefox Versions 23 to 26. The installation process is painless and does not require a restart of your browser.

Next, we need to install FireLESS. First, browse to https://addons.mozilla.org/en-us/firefox/addon/fireless/, and then click on Add to Firefox to initiate the installation. You might get a prompt to allow Firefox to install Firebug—click on Allow. After Firefox has downloaded the plugin, click on Install Now (shown in the following screenshot) to begin the installation:

Click on Restart Now when prompted. FireLESS is now installed; we will see how to use it in Chapter 3, Getting Started with Less.

Debugging the Less code in Chrome

We're not limited to just using Firefox to debug our source code. We can also use Chrome; for this, we need to install the support for source maps in Less.

Source maps are a relatively new feature, which can work with JavaScript- or CSS-based files; the concept is based around providing a mechanism to map back the compiled JavaScript- or CSS-based code to the original source files. This becomes particularly effective when the content has been minimized—without a source map, it would be difficult to work out which piece of code was at fault!

This example relies on the use of a web server to work correctly. We will go ahead and install WampServer for this purpose, so let's do this now.

Installing WampServer

WampServer can be downloaded from various versions for Windows are available from within the Download tab; make sure that you select an appropriate one for your platform. If you work on an Apple Mac, then you can try installing MAMP, which you can download from users should have a suitable option available as part of their distro.

Start by opening the installer file you downloaded earlier. In the welcome prompt, click on Next. Select I accept the agreement, and then click on Next, as shown in the following screenshot:

We need to assign a location somewhere to install the application files (and later, host our test pages). By default, WampServer will get installed into c:\wamp—this is ideal, as it avoids the use of spaces, which will otherwise translate into %20 in our URLs.

For the purposes of this book, I will assume that you've used the default; if you've used something different, then you will need to remember the new location for later when we host our example files.

The setup will then prompt you whether you want to create quick launch or desktop icons—at this point, you can choose whichever you prefer to use. Clicking on Next will show you a Ready to Install screen, which gives you a summary of our install actions. If all is well, click on Install to complete the process.

We will then see the Preparing to Install window, before Setup then runs through the installation. Just before the completion, you will see this message, where we should click on No:

In addition, we also need to install Grunt and Node, as outlined earlier in the Watching for changes to Less files section of this chapter.

Now that WampServer is installed, open a command prompt and change the location to your project folder—for this example, I will use a folder called lessc, which will be stored at c:\wamp\www\lessc.

Tip

In this example, we've used a demo folder—this will need to be your folder from which the content is served when working in production.

In the prompt, enter the following command:

lessc namespaces.less > namespaces.css –source-map=namespaces.css.map

Here, namespaces.less and namespaces.css are the names of your Less and CSS files, respectively. When compiled, lessc produces a .map file, which the browser will use to find the various definitions in Less files that equate to a specific CSS style rule in your code.

Copy the namespaces.less, namespaces.css, main.html, and namespaces.css.map files to your web server's WWW folder—in this instance, this will most likely be c:\wamp.

Open Google Chrome, and then browse to http://localhost/lessc/main.html. If all is well, you will see something like the following screenshot, assuming that you have pressed F12 to display the developer toolbar:

Here, you can see the various CSS styles that make up the .mediumbutton class; Chrome shows you the compiled output styles, but in place of indicating where each rule appears in the CSS, we can see where the original rule is shown within the Less file.

We will be able to achieve the same results using Opera (as recent versions are now WebKit-based). Safari has introduced support for source maps, but only from Version 7 onwards. Internet Explorer (IE) is the only major browser that is yet to include any support for source maps.

For now, don't worry about how source maps work, as we will revisit this in more detail later in the book.