Less/Sass Debugging in Chrome Dev Tools/Firebug

Less/Sass debugging in Chrome Dev Tools/Firebug

Chrome Developer Tools now supports Sass debugging out-of-the-box.

Updated to include source maps:
Previous versions used inline comment in your css to provide a refernce to the source code (see below how-to). recent versions of sass (3.3+) and chrome (31+) use source maps for that:

1. Make sure you have Sass 3.3.x
2. Compile your Sass with the --sourcemap flag.
3. In Chrome/ium DevTools open settings and click general.
4. Turn on "Enable CSS source maps".

More info is available on the Chrome dev tools blog:
https://developers.google.com/chrome-developer-tools/docs/css-preprocessors

Older versions:
1. First, you should compile your Sass with --debug-info turned on.

2. In Chrome/ium go to about:flags

3. Enable Developer Tools experiments

4. In your inspector (F12), open "Settings", then go to the "Experiments" tab
and check "Support for SASS".

LESS: how to use dumpLineNumbers

Firstly you will have to write mediaquery lowercase, than it will work in Less till at least version 1.7.5.

In the compiled CSS you will find lines such as:

@media -sass-debug-info{filename{font-family:file:///home/t.less}line{font-family:\0000315}

In your index.html you should use:

<script type="text/javascript">
less = {
    env: "development",
dumpLineNumbers: 'mediaquery'
}
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.5/less.min.js" type="text/javascript"></script>

Alternatively you append #!dumpLineNumbers:mediaquery to the URL.

Notice that you can do the same when compiling server side by running the following command:

lessc --line-numbers=mediaquery index.less 

Secondly you should find a tool which can read these @media -sass-debug-info lines. For firefox there was fireless, which seems to be a dead end now. Fireless required a patched version of LESS which is not available / supported any more.

Also see:

Less/Sass debugging in Chrome Dev Tools/Firebug

LESS/SASS CSS opposite from minification/optimizations?

You'd be surprised, but gzipped CSS files that have repeated blocks of code shouldn't be too much larger than ones with the shorter selectors.

This is thanks to how the compression algorithm handles duplicate strings in a file. Instead of including the same string twice, it replaces the second occurrence with a reference to the first one, and so that string only appears in the compressed file once. Take a look at how repetitive the selectors in your generated CSS file are - this should make them compress fairly well.

Naturally, the key to this is making sure your CSS files are gzipped - leaving them uncompressed will definitely increase the file size.

Does using LESS for CSS rendering break browser-based developing?

LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino. (http://lesscss.org/). So yes, you can use it also on the client-side.
Just make sure you link your less stylesheets with rel="stylesheet/less and remember to add less.js into your HTML to generate CSS from the less source.

A drawback is that developer tools like Firebug don't have native support for less. This is the same problem as with CoffeeScript, which has really poor debugging facilities in browsers right now. I'm pretty sure debuggers will evolve to support other JS languages, I wouldn't be surprised to see similar happening for stylesheet languages like less. However, I wouldn't hold my breath while these tools make their way to the mainstream.

I share your line of thinking in that while LESS may be a wonderful idea for hardcore CSS development, it also adds a layer of complexity to your development stack. Doing so may not be justifiable on all cases.

Serving .scss files on rails development environment

If you're using Rails 4, you can install and follow the instructions for the sass-rails-source-maps gem. Then you should be able to see/edit .scss files in Chrome's web inspector.

---

Related Topics