Chrome Not Loading CSS Source Maps

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"

SASS sourcemaps not working in Google Chrome

It turns out that auto-prefixer was running on the compiled CSS and stripping out the sourceMapURL comment, which now makes sense that it would do that, because unless you have auto-prefixer source maps turned on (which I did not), it would make the source maps untrue. A cool thing I learned form this, is that auto-prefixer is apparently able to use Sass source maps to make it's own, and keep everything true to the Sass files.

I actually wish there was a warning whenever auto-prefixer finds source maps, but doesn't have source maps enabled itself, because it's obvious that tasks shouldn't generate sourcemaps that wont be used.

I would have been more likely get an answer sooner if I would have posted my whole Gruntfile, but it's a lot of stuff, and I was trying scale back to code I thought was relevant. Darn.

Error message DevTools failed to load SourceMap: Could not load content for chrome-extension://...

That's because Chrome added support for source maps.

Go to the developer tools (F12 in the browser), then select the three dots in the upper right corner, and go to Settings.

Then, look for Sources, and disable the options:

• "Enable JavaScript source maps"
• "Enable CSS source maps"

If you do that, that would get rid of the warnings. It has nothing to do with your code. Check the developer tools in other pages and you will see the same warning.

Why isn't Chrome seeing my css source map?

Yes, you are correct @Mark Weston - it was an issue with gulp-autoprefixer:
Turns out that gulp-autoprefixer was stripping out the /*# sourceMappingURL=style.css.map */ comment at the bottom of my css file.

This is an open issue with gulp-autoprefixer: https://github.com/sindresorhus/gulp-autoprefixer/issues/1

Sass source map support on chrome isn't working

Try following the tutorial in this link. I just set this up this morning and it's working fine for me.

This will let you inspect an element and then find what the corresponding SCSS declaration is.

---

Related Topics