Chrome version: 44

When working in my normal development environment (C#, IIS Express) css files downloaded by the browser are available in the sources tab and I can see what styles come from what files in the element inspector. However, in my current development environment (PHP, Apache, Xammp). The stylesheets are being downloaded and rendered as style tags and are not available in the sources tab. This is rather annoying as I can't save locally edited styles to my working copy. I've never seen this before and can't seem to find any answers with a quick google. Does anyone know what would cause dev tools to render this way? I feel like it must be some sort of server configuration issue but I can't be sure. Example below: 

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

```

is rendered as: 

[![enter image description here](https://i.stack.imgur.com/P64Cy.png)](https://i.stack.imgur.com/P64Cy.png)

And looks like so in the element inspector: 

[![enter image description here](https://i.stack.imgur.com/DSS4o.png)](https://i.stack.imgur.com/DSS4o.png)

Any help greatly appreciated!