How to Make CSS Sourcemapping Work in Chrome with Compass (Sass)

How to make CSS sourcemapping work in Chrome with Compass (SASS)

You've missed a few steps :

Chrome < 53

1. Enable CSS source maps in Chrome (DevTools > Settings > Preferences)
2. Enable auto-reload generated CSS source map in Chrome (DevTools > Settings > General)
3. Add your project folder in the Chrome workspace (DevTools > Settings > Workspace)
4. Chrome ask you for a full access to this folder, accept
5. In the Sources tab, find your generated CSS file, right click on it and choose Map to network ressource, and select the same file name in the shown dropdown
6. Chrome ask you to reload DevTools, accept

Chrome >= 53

1. Enable CSS source maps in Chrome (DevTools > Settings > Preferences > Sources)
2. In the Sources tab, right click anywhere and choose Add folder to workspace, and select your project folder.
3. Chrome ask you for a full access to this folder, accept
4. In the Sources tab, find your generated CSS file, right click on it and chosse Map to file system ressource, and select the same file name in the shown dropdown

Now, you can change your Sass file in your favorite editor (you then need to watch it, or relaunch sass command), or directly in Chrome Devtools: select your file, edit it and save it.

Debugging Sass in Chrome on OSX

Source maps do actually work in OSX Chrome! I have several stylesheets in my dev environment, and I was stupidly inspecting styles that belonged to a stylesheet that didn't have a .css.map file yet. If you follow the steps above this should work for you, probably even with a current version of Chrome.

Chrome not loading CSS source maps?

You can try the following steps:

1- delete the map file and regenerate it again.

2- Using the chrome inspector, go to Settings > General and then click on the button "Restore defaults and reload"

Editing SCSS using Chrome DevTools not working in Ionic project

Take a look at this post: Sass Source Maps + Chrome = Magic

Also see:

• I want to edit my sass file from Chrome dev tool from element tab, is that possible?
• How to make CSS sourcemapping work in Chrome with Compass (SASS)

Is there a drawback to processing Sass to css with both debug info and sourcemap?

Well, it probably takes a negligible amount longer, but basically, no. I wouldn't worry.

How to auto-reload css in Chrome after editing SASS files

It could be that the Sass-file is still compiling when Chrome tries to reload the CSS. Setting the 'Auto-reload CSS upon Sass save' Timeout to 5000 ms fixed it for me. When Chrome triggers the reload, it can even prevent Sass from recompiling the CSS.

---

Related Topics