CODEWITHSUNDEEP
cssgoogle-chromeweb-essentialssource-maps
Glen Little
Glen Little

Reputation: 7128

Chrome not loading CSS source maps?

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.

Upvotes: 26

Views: 17649

Answers (5)

Ismail Al.Mahdi
Ismail Al.Mahdi

Reputation: 1

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.

Upvotes: 0

ILYAS_Kerbal
ILYAS_Kerbal

Reputation: 1445

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.

Upvotes: 0

flyer88
flyer88

Reputation: 1093

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

Upvotes: -1

Glen Little
Glen Little

Reputation: 7128

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

Upvotes: 2

alaahd
alaahd

Reputation: 274

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"

Upvotes: 14

Related Questions