Sass Sleuth

Adapts Webkit Web Inspector to handle Sass line number debugging information

Download for:

This project is maintained by Mobify

Debugging Sass in Webkit Browsers

Writing CSS for a complex website requires a lot of effort. Styling a complete site often results in a lot of selector repetition, dimension calculations and prefix-caused duplication of CSS properties.

Sass is a metalanguage that provides additional features over top of CSS, but can be compiled into regular CSS before deployment. Unfortunately, an annoying downside is that inspecting CSS in the browser development tools shows CSS line numbers, which do not match lines in the original Sass file(s).

Sass Sleuth provides browser extensions for Chrome and Safari that integrates the debugging information compiled into the CSS files to show the original Sass line numbers in the development tools.

Read our blog post on how to use Sass Sleuth.