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:

enter image description here

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.

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? — Benjamin Solum, Jul 16 '15 at 21:26
I've switched over to Version 44.0.2403.89 m (not beta). Problem is still happening. — Glen Little, Jul 16 '15 at 22:18
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. — Benjamin Solum, Jul 16 '15 at 22:25
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?) — Paul, Sep 09 '15 at 09:14
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. — loganfarr, Oct 05 '15 at 17:14
Would this help? http://stackoverflow.com/questions/26444140/how-to-make-css-sourcemapping-work-in-chrome-with-compass-sass — Riskbreaker, Oct 14 '15 at 18:03

score 14 · Accepted Answer · answered Nov 02 '15 at 22:39

14

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"

answered Nov 02 '15 at 22:39

alaahd

274
4
7

1

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!!! – Er85 May 31 '16 at 08:19
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. – Thomas Higginbotham Aug 18 '16 at 14:38
after hours of trying to figure this the only thing that worked is this answer AND restarting chrome. Thanks!!! – greatwitenorth Jun 05 '18 at 15:16

score 2 · Answer 2 · answered Feb 16 '16 at 22:39

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== */

answered Feb 16 '16 at 22:39

Glen Little

6,951
4
46
68

And how do I make sass generate sourceMap like that? – deathangel908 Jul 04 '17 at 10:12
1

@deathangel908 You should be able to find the answer in the documentation of whatever SASS processor you are using. – Glen Little Jul 05 '17 at 19:01
@deathangel908 there is an example with Gulp on the gulp-sass page, just search for "source map" https://www.npmjs.com/package/gulp-sass – retrovertigo Nov 30 '17 at 00:26

score 0 · Answer 3 · answered May 21 '19 at 06:32

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

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

score 0 · Answer 4 · answered Jul 12 '19 at 09:10

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.

score -1 · Answer 5 · answered Apr 11 '18 at 19:42

-1

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

answered Apr 11 '18 at 19:42

flyer88

1,073
3
15
33

Chrome not loading CSS source maps?

5 Answers5

Linked