Chrome CSS css files as style tags in the element inspector

Question

Chrome version: 44

When working in regular development environment files (C #, IIS Express) downloaded by the browser, they are available on the sources tab, and I can see which styles appear from the files in the element inspector. However, in my current development environment (PHP, Apache, Xammp). Style sheets are loaded and displayed as style tags and are not available on the sources tab. This is pretty annoying since I cannot save the locally edited styles in my working copy. I have never seen this before and cannot find answers using fast google. Does anyone know what might force development tools to do this? I feel this is a specific server configuration issue, but I cannot be sure. Example below:

<link href="css/bootstrap.css" type="text/css" rel="stylesheet"/> 

displayed as:

And it looks like this in the item inspector:

Any help is much appreciated!

Answer 1

I just met the same problem. Not sure if my case can fix your problem, but I found out that I had a script 'prefixfree' requesting redundant css files at boot time. So I just commented on this line and my style in the Element Inspector returned to normal.

 <script src="~/Scripts/prefixfree-1.0.7.js"></script> 

Answer 2

In my case, the problem was apparently caused by the incorrect / incorrect CSS style that was applied to the target element. Usually I can access the style of an element after removing this style:

 background: -webkit-gradient(linear,0% 0%, 0% 100%, from(#2521BC), to(#1C1957), color-stop(.5,#3A33E7));