Editing Chrome Favorite

Authoring CSS with a preprocessor comes with a number of advantages, but can be tricky to work with when you want to play with changes in your browser DevTools. For example, changes saved to the compiled CSS in the DevTools can be overwritten when you run Sass again which isn't ideal. With SASS 3.3 and above (which you can currently install using `sass gem install sass --pre`), it's easy to create mappings to your SASS files so you can easily save changes on the fly without needing to worry.

Firstly, add the --sourcemap to your SASS watch command. Like so:

sass --watch scss/devtoolsecrets.scss:css/devtoolsecrets.min.css --style compressed --sourcemap

Next, add a sourceMappingURL with the name of map file to the bottom of your SASS file. For example:

/*@ sourceMappingURL=devtoolsecrets.css.map */

Next, you need to have enabled the "Experiments" tab. If you haven't already, navigate to chrome://flags and enable the option marked "Enable Developer Tools experiments". You'll need to press "Relaunch Now" button at the bottom of the page to apply your changes. Go to the "Settings" panel of Chrome Developer Tools by clicking the cog on the bottom right.

Click the "General Tab" and activate "Enable Source Maps". Click the "Experiments" tab and check the option "Support for SASS".

After restarting your browser, you will now be able to view the line numbers of the SASS files directly.