Enabling Source Maps in Chrome

Update: Google have now compiled a solid walkthrough that can be see here: Debugging JavaScript - Source Maps

I've seen a couple of posts about enabling source map support, but never actually got it up and running. Below are the steps that I took to achieve this. I use Google Chrome in my development workflow and almost all of the time it's the Canary variation. The (latest) version I'm currently using is "Version 26.0.1367.0 canary" which will most definitely change soon.

Note: I'm pretty sure this will work with the latest Chrome version also e.g. you don't need to use Canary

console-links

Step 1

Open your SASS based project with Chrome and either right click on the screen and click "Inspect Element" or use the shortcut key:

Windows: Ctrl+Shift+J

Mac: CMD-Option-I

Now click on the small cog icon in the bottom right hand screen and click "Settings".

Note: You might not have to click "Settings" yet. That might be all you have available at the moment.

settings-cog

Step 2

Under the "Sources" heading you'll want to check "Enable source maps". You might be thinking "Wow, that's all I had to do? Nice!" but no, you have to do a little more sorry. I've heard rumours that for some people that's all they had to do, but I wasn't so lucky.

enable-sourcemaps

Step 3

Now open up the Chrome flags settings by entering "chrome://flags/" into the URL bar. Once this page pops up you'll want to search the page for "Developer Tools" or you can scroll very slowly trying to find it with your eyes...

chrome-flags

Note: The warning at the top of this page is "fo' real"

developer-tools

Click "Enable" under the "Enable Developer Tools experiments" flag.

You might want to restart Chrome at this point. Then open the "History" menu and open your "Recently closed" pages.

Step 4

Now if you go back to the inspector settings (see Step 1) you should see an "Experiments" menu. Open this up and make sure the "Support for Sass" menu is checked.

support-for-sass

You will probably have to restart the browser again.

Step 5

Now the browser is set up and ready to use source maps you will need to make some small changes to your CSS compilation.

Compass

compass compile --debug-info

compass watch --debug-info

Or you can add the following to your config.rb

sass_options = { :debug_info => true }

SASS

sass --watch style.scss:style.css --debug-info

After compiling your styles again using the debug info flag you should be abe to refresh your project in the browser and see the correct style to sass file mapping.

Closing notes

Hopefully the above helped you get source maps up and running. Remember to take the debug info flag out of your compilation settings before moving to production mode, else be the butt of many jokes.

As always if any of the steps above are incorrect or something gets updated then please let me know how it could be changed and updated.

Leave a comment -