This is the third re-write of this post since first posting it back in November 2012. I’ll keep trying to update as and when things change as there’s every chance you are visiting this from a link in the book ‘Sass and Compass for Designers‘.

Main copy:

Safari 6.1+ and the latest versions of Chrome (use v29+ of Chrome, if your ‘stable’ version isn’t yet at v29, grab the ‘Beta’ or ‘Dev’ version here: http://www.chromium.org/getting-involved/dev-channel) use ‘source maps’ for Sass debugging. In order to get this working with Sass, you’ll need Sass 3.3 (pre-release at the time of writing). To get the pre-release version of Sass run sudo gem install sass –pre in the CLI. Then run sass -v to check.

There are now plenty of other resources on the Net to explain how to get this up and running from the command line using the Sass watch command. There’s a good one over at Net Tuts: http://net.tutsplus.com/tutorials/html-css-techniques/developing-with-sass-and-chrome-devtools/. I’ve therefore omitted that section from this rewrite. Why I hear you (one person if I’m lucky) cry?
Well, I think there is a simpler way to source mapping glory by using Grunt to compile your Sass. And how about automatic live reloading of changes in the browser to boot? If you know nothing of Grunt, fear not, it’s perhaps a topic for another day. All you need (hopefully) is to follow along and do a little cut and paste.

Grunt users, you’ll know which bits to skip, for everyone else, crack open your text editor of choice and your Terminal (sorry Windows users).

• Go download and install Node. It’s a clicky-clicky install. No command-line nerdery needed. Done? Excellent…
• In the root of your project make two blank files. One called ‘package.json’ and the other called ‘Gruntfile.js’
• Copy and paste this into the package.json file:

{
  "name": "YOUR PROJECT NAME",
    "version": "0.0.1",
    "devDependencies": {
        "grunt": "~0.4.5",
        "grunt-contrib-watch": "~0.6.1",
        "grunt-contrib-sass": "~0.7.3"
    }
}

1. Copy and paste this into the Gruntfile.js file:

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        watch: {
            sass: {
                files: ['sass/**/*.{scss,sass}','sass/_partials/**/*.{scss,sass}'],
                tasks: ['sass:dist']
            },
            livereload: {
                files: ['*.html', '*.php', 'js/**/*.{js,json}', 'css/*.css','img/**/*.{png,jpg,jpeg,gif,webp,svg}'],
                options: {
                    livereload: true
                }
            }
        },
        sass: {
            dist: {
                files: {
                    'css/styles.css': 'sass/styles.scss'
                },
                options: {
                    sourcemap: 'true'
                }
            }
        }
    });
    grunt.registerTask('default', ['watch']);
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
};

• Let’s install Grunt. From the command line run this command (you may need to prefix it with ‘sudo’): npm install -g grunt-cli. This installs the Grunt command ‘globally’ so you can run it from any location
• Now, if you aren’t already in the root of your folder, move there e.g. cd ~/Sites/MY PROJECT. Now run (again you may need to add sudo to the beginning if you see a bunch of errors) npm install. Once that’s finished, if you look in the root of your folder you should see a ‘node_modules’ folder. Just ignore that, you don’t need to touch it.
• Now, from the command line and still within your project folder run ‘grunt’ (e.g. newbie tip: just type grunt and press enter) and you’ll see something like this on the command line:

Running "sass:dist" (sass) task

Running "watch" task
Waiting...

Now, to actually see the Source Map support in Chrome (it shows regardless in Safari 6.1+):

• Type ‘chrome://flags‘ in the Chrome address bar and switch on ‘Enable Developer Tools experiments’. Restart Chrome. [note: in recent versions of Chrome e.g. 30+ you won’t need to do this step]

• Now back in Developer Tools, click on settings (cog icon in the bottom right), click the experiments tab and then tick the ‘Support for Sass‘ tick box. [note: in recent versions of Chrome e.g. 30+ you won’t need to do this step]

Now in the General tab of Web Developer Tools settings, under the ‘sources‘ header, ensure ‘enable CSS source maps‘ is ticked (note: it used to have a single button for both CSS and JS source maps as shown in the image. Now there are separate ones). Also tick the ‘Auto-reload generated CSS’.

• If you don’t already have the Chrome LiveReload extension you’ll want to install that and click the icon to get some automatic LiveReload of changes. You’ll want the same extension if you work with Safari.

Now back to Sass:

Re-save your styles.scss file and you should see the CSS compiled and Sass/Grunt will also generate a file called styles.css.map. It looks like utter gibberish but Chrome knows what to do with it. When you open Chrome and inspect the styles of your project not only will you be able to see the partial file that originated the style, you’ll also be able to click it’s name to be taken straight to the file in the dev tools.

Jumping to particular partial or particular property/value

Debugging with source maps works beautifully, even better than the previous debug info. As an example of the additional hotness, you can not only click the partial name/no (e.g. _layout:4) in the elements panel to go straight to that name. If you command-click one of the property names within the selector (e.g. color) it will take you directly to the line in the Sass that colour is declared.

Saving back to the Sass file from within Dev Tools

Further more, you can even set up Chrome to write back to the source Sass files (something that right now I’m not sure you can do with Safari) with changes you make to styles in the Dev tools. To do that, within the sources panel, right-click your file and choose ‘save-as’. Browse to the location of the Sass partials.

Now, when you edit a file in the Sass tools not only do you see instant changes, you can also click command+S to save those files back the partial – no more double-punching buttons!

You can go one step further and add a ‘mapping’. This then gives Chrome access to your file system without needing to ‘save as’ to a file each time. The idea is to create a 1:1 parity between the files that Chrome is rendering on the screen and the source files you are using to generate things. Let’s set this up.

First of all you need to set the mapping up. With Dev Tools open click the little cog down the bottom right to enter settings:

Now click ‘Workspaces’ on the left and ‘Add folder’ button on the right.

Browse to the relevant place your source files are saved on your machine (e.g. ~/Sites/MY SITE NAME). On choosing you will see a yellow warning prompt from Chrome asking you to confirm that you give it access. Click allow.
You’ll now see the file path in the Folders window of ‘Workspace’:

Now, close the setting screen down and click the ‘Sources’ tab of Dev Tools. Now pay attention because this is the bit that can easily trip you (read: me) up. Right-click one of the partials in the SERVER side of things. To be clear, if you are using some localhost of sorts, it will be ‘localhost:8888′ or similar – generally listed before the local file system (indicated in my grab by the folder ‘bf2013′ at the bottom), with a partial selected, choose ‘Map to File System Resource…’

Now you’ll see a pop-up box asking you to choose the relevant file. In this example, the equivalent file on my local system is the fourth one down (e.g. not the .sass-cache ones) so that’s the one to select.

With that done, Chrome will advise it needs to restart Dev Tools. Allow it to do so.
Now, when you click on a partial name in Dev Tools, or command-click a property/value and it takes you to the partial within Dev Tools, you can edit a property/value/whatever and click ‘command+s’ and the change will be saved back to the source files.

Amazing – no more round trips to the text editor.

Conclusion

With that and this little Grunt set-up Grunt (should) now automatically watch for changes in any of your project files you make in your text editor and update the browser accordingly, producing a new source map file each time for easier debugging. Chrome on the other hand will handle changes happening from the other direction, saving any changes there back to the source files. Admittedly, it’s a bit of a chore to set up but its sweet when done!

PS. Grunt and the associated plugins are amazing. A big thanks to everyone involved in those projects and for the Chrome team for making such great tools to work with. Kudos.