View SCSS in Chrome Dev Tools with Source Maps

@paul_irish recently tweeted about this ( I can’t find the tweet right now so I’ll just summarize )

The one nice thing about writing vanilla CSS is that when something breaks or needs to be tweaked you can pop open the dev tools and find the exact file and line where the offending CSS lives. With SCSS or LESS you have to find the partial you stored it in, track down the  equivalent line and finally recompile it to CSS. It only takes a little longer but multiply that by tens or even hundreds of times per day and it can add up to a lot of wasted time.

Luckily Chrome has made it really easy to view the raw SCSS (no LESS support yet, sorry) right in dev tools. This was an experiment added in Chrome 23 so make sure you’re up to date then :

  1. Go to “chrome://flags” in the address bar
  2. Check “Enable Developer Tools experiments.”
  3. Restart Chrome
  4. Open dev tools, go to the cog in the lower right where you’ll see a new Experiments tab
  5. In Experiments check “Support for Sass”
  6. While you’re at it enable “Snippet support”***
  7. Over on the General tab click “Enable source maps”

If you’re running the regular SASS compiler you’ll need to add –debug-info in the command line

If you use Compass add sass_options = { debug_info: true } to config.rb

Voila! Now you can see what line number / partial you need to fix right in dev tools

*** After enabling snippets in Experiments, navigate to the Sources tab in dev tools. If the left toolbar is hidden click the little expander thingy. In there you’ll see a new Snippets tab where you can write blocks of javascript and save them for later. Now whenever you need to Cornify something you can just replay your snippet and BOOM rainbows.

 

 

Comments are closed.