Mapy CSS w Google Chrome DevTools

Rosnąca popularność preprocessorów CSS skłoniła twórców przeglądarki Google Chrome do zaimplementowania narzędzia ułatwiającego developerom debugowanie CSS.

Wraz z rozwojem naszego projektu znalezienie konkretnych reguł CSS rozsianych po plikach staje się coraz trudniejsze. Standardowy podgląd stylów w DevTools zdaje się na niewiele, ponieważ badamy skompilowany CSS, a nie jego kod źródłowy. Dlatego od wersji 30.0.1599 Google Chrome  mamy możliwość włączenia wsparcia map CSS. Teoretycznie działa ono ze wszystkimi preprocessorami wspierającymi mapy, jednak w tym artykule skupimy się na SASS i COMPASS.

SASS

Aby SASS generował nam mapy CSS, musimy mieć zainstalowanego go w wersji min. 3.3.0. Do włączenia wystarczy flaga –sourcemap, np.

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

COMPASS

W COMPASS niestety sprawa prezentuje się nieco inaczej. Ostatnia wersja stabilna (0.12.4) nie ma wsparcia dla map, w związku z czym będziemy musieli posilić się wersją alpha. Na dzień dzisiejszy dostępna jest wersja 1.0.0.alpha.19 i tą właśnie zainstalujemy:

gem install compass –pre

Potem – podobnie jak w przypadku SASS – dodajemy flagę –sourcemap

compass watch –sourcemap

Niestety, jeśli korzystamy z generatora sprites, w konsoli będziemy mogli zauważyć komunikat:

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.

Na szczęście zarówno mapy CSS, jak i sprites, generują się i działają prawidłowo.

Google Chrome

Teraz pozostaje nam tylko włączyć wsparcie w Google Chrome.

rys. 1

Google-Chrome-CSS-maps-creativestyle-sourcemaps

W tym celu należy:

  1. Przejść w DevTools do ustawień (Settings > General)
  2. Włączyć opcje: Enable CSS source maps oraz Enable CSS source maps (rys. 1)

Mapy CSS w praktyce

W celu sprawdzenia funkcjonowania Map CSS w praktyce, użyjemy dwóch poniższych przykładów. Jak widać, reguły znajdujące się w narzędziu DevTools zostały poprawnie zinterpretowane zarówno w main.scss (rys. 2), jak również w partial _test.scss (rys. 3).

rys. 2

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

 

rys. 3

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

 

 

 

 

 

 

pluswerk