Chrome not loading CSS source maps?

Question

Until recently, my Chrome browser was loading CSS source map files correctly. Now, it is not.

The setting is on:

And the CSS files have a source mapping tag at the bottom:

/*# sourceMappingURL=Home.cshtml.css.map */

But the Network tab and Fiddler2 show that Chrome is not even trying to load the source map file.

Is there something that I'm missing? Is the sourceMappingURL syntax correct? I've toggled the "Enable CSS source maps" setting on and off.

Chrome version: 44.0.2403.30 beta-m

Sourcemap files generated by Web Essentials in VS 2013.

Dartmouth

If it was only recently that they stopped working, do your source maps load in Chrome 43 (stable) with the same sourceMappingURL? Perhaps a regression in Beta? – Locksmith

I've switched over to Version 44.0.2403.89 m (not beta). Problem is still happening. – Dartmouth

When I've dealt with source map issues like this it was typically because my file structured changed from when the source maps were generated (doesn't explain what fiddler says though). A solution I've used in the past for this is to inline the source maps into the JS files themselves during development and then stripping out source maps during production. The files are huge, but since it's just in development, it doesn't matter. – Locksmith

Same problem. FF works fine – Secularism

Not sure how much of a help this will be, but my source maps are working fine in Chrome 45.0.2454.85. My sourcemap syntax is /*# sourceMappingURL=style.css.map */ (the style.css and style.css.map are in the same folder, if that's any different?) – Satellite

This may sound like a dumb question, but are the source maps actually being generated and generated in the correct place? I had problems getting Chrome to detect my sourcemaps untilI I realized that they weren't even there. – Tambac

Would this help? #26444640 – Corrie

Thanks, @Riskbreaker. Good info, but didn't help with this. – Dartmouth

Answer 1

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"

Madeleinemadelena

Not sure why you got -1 on this answer, but after many tries and searches over the web. my source maps finally works thanks to your answer. THANK YOU!!! – Chavis

As of Chrome 52, The "Restore defaults and reload" button is at the bottom right of Settings > Preferences. Use the vertical ellipsis ( ⋮ ) at the top right of the inspector to get to settings. – Herodotus

after hours of trying to figure this the only thing that worked is this answer AND restarting chrome. Thanks!!! – Encarnalize

Answer 2

When the CSS file has the sourcemapping embedded as base64, then it seems to work fine.

For example:

/*# sourceMappingURL=data:application/json;base64,eyJ2....5235== */

Dartmouth

And how do I make sass generate sourceMap like that? – Bestialize

@Bestialize You should be able to find the answer in the documentation of whatever SASS processor you are using. – Dartmouth

@Bestialize there is an example with Gulp on the gulp-sass page, just search for "source map" npmjs.com/package/gulp-sass – Synapse

Answer 3

OMG! The problem made me crazy! I found that the CSS file is not complete. Here is what I did to solve the problem:

1. Make sure that CSS maps are enabled in Dev tools settings.
2. Check the end of CSS file whether it contains a link to the source map.
3. Press Shift + Click on the refresh button to force resources update.

Hulse

Answer 4

Your code seems to be okay, the only reason why it is not reflecting the changes because you are loading the cached CSS file. To load the new CSS file, you need to hold shift and press the reload button to ask chrome to reload all the files instead of to loading it from the cash.

Xiphoid

Answer 5

Does each scss file need to be accesible from the outside to make this work? I have css maps configured but I have see that each .scss file that is being processed is not accesible from the browser

Lawanda