CSS-Maps in Google Chrome DevTools

The growing popularity of CSS preprocessors persuaded creators of the Google Chrome browser to implement tools that make CSS debugging easier for developers.

As our project develops, it becomes more and more difficult to find specific CSS rule sets spread over files. The standard preview of style in DevTools is of little use, as we are examining a complicated CSS instead of its source code. That is why, since Google Chrome version 30.0.1599, we have had the possibility to enable support for CSS maps. Theoretically, it works with all preprocessors supporting maps, but this article focuses on SASS and COMPASS.

SASS

If we want SASS to generate CSS maps for us, we need to have installed no earlier version than 3.3.0. The only thing necessary to enable it is a flag –sourcemap, e.g.

sass –watch –sourcemap sass/main.scss:css/main.css

COMPASS

It is a bit different in the case of COMPASS. Its last stable version (0.12.4) does not include support for maps, so we need to use an alpha version. At present, 1.0.0.alpha.19 version is available, and this is the version we are going to install:

gem installcompass –pre

Then, as in the case of SASS, we add a sourcemap flag

compass watch –sourcemap

Unfortunately, if we are using sprites generator, it may happen that we notice  the following message in our console:

WARNING: Compass::SpriteImporter should define the #public_url method.

WARNING: Couldn’t determine public URL for “C:\Ruby200\lib\ruby\gems\2.0.0\gems\compass-core-1.0.0.alpha.19\stylesheets\compass\utilities\sprites\_base.scss” while generating sourcemap.  Without a public URL, there’s nothing for the source map to link to.

Fortunately, both CSS maps, as well as sprites are generated correctly, and they work normally.

Google Chrome

The only thing we need to do now is to enable support in Google Chrome.

picture 1.

Google-Chrome-CSS-maps-creativestyle-sourcemaps

For that purpose we should:

  1. Navigate to DevTools settings(Settings>General)
  2. Enable the option: Enable CSS source maps and Enable CSS source maps (picture 1.)

CSS-Maps in practice

In order to review the operation of CSS Maps in practice, we can use the following examples. As can be seen, the rules contained in the DevTool have been interpreted correctly, both in main.scss (picture 2.), as well as in the partial _test.scss (picture 3.).

picture 2.

Google-Chrome-CSS-maps-creativestyle-sourcemaps-rys 3

 

picture 3.

Google-Chrome-CSS-maps-creativestyle-sourcemaps-rys 2

pluswerk