Sass sourcemaps in Chrome not working. Flummoxed

Question

I have followed all the directions I can find for getting Sass sourcemaps to work in Chrome -- and I'm still failing somehow. I can't tell how -- maybe you can?

With Sass 3.3.0.alpha.198 (the "bleeding edge", I'm told), I'm successfully generating a sourcemap file (test.css.map) that sites alongside my compiled CSS; and at the bottom of that compiled CSS is the line: /*# sourceMappingURL=test.css.map */. So that step seems to be going well.

Within Chrome Canary, I have gone to chrome://flags and enabled Developer Tools Experiments. I have restarted. Within my inspector Settings, in the General tab I have checked "Enable source maps"; within the Experiments tab I have checked "Sass stylesheet debugging".

After all the above, when I inspect an element (on a local HTML file accessing the compiled CSS) I am still given the same old CSS line number, linking to the same old compiled CSS file. No indication of sourcemap support. This is not what the tutorials say should happen.

(I have also tried this in stable Chrome -- is it supposed to work in stable? -- by enabling Developer Tools Experiments and checking the boxes "Enable source maps" and "Support for Sass". No luck there, either.)

Can someone please tell me what I'm missing?

Answer 1

Are you loading your page from the file:// URL? That won't work for security reasons - use any http server on localhost.

Also, updating your Canary is a good idea; CSS source maps have graduated from the experiments. You should check "Enable CSS source maps" in the General settings.

Answer 2

In case anyone else ends up here, to use source maps in Chrome for Sass, you need to use the --sourcemap flag to generate them first!

sass --watch --sourcemap --debug-in sass/screen.scss:screen.css

More info: https://developers.google.com/chrome-developer-tools/docs/tips-and-tricks#debugging-sass