CODEWITHSUNDEEP
cssinternet-explorerdebugging
puzzfuzz
puzzfuzz

Reputation: 106

Dynamically added stylesheet not showing up in IE Developer Tools

I'm working on a cross-browser bookmarklet where I need to inject my own style sheet into the page as well as various divs, etc. I've got it working everywhere but IE so am now attempting to debug some of the styling issues there.

I'm adding my css to the document after a user clicks my bookmarklet as follows: 

if (document.createStyleSheet){
    document.createStyleSheet("http://mydomain.com/css/mystyle.css");
} else {
    $('head').append('<link rel="stylesheet" href="http://mydomain.com/css/mystyle.css" type="text/css" />');
}

The file is being fetched and applied to divs, etc. I create on the page, however when I inspect the element in IE 9 Developer Tools it does not show me ANY properties from the stylesheet I added dynamically, only those in the style="{}" attr.

Also, mystyle.css does not show up in the dropdown on the CSS tab, yet it does have a corresponding element in the head and styles in it are being applied to the dom correctly.

Any thoughts on how to force the dev tools to recognize my new sheet? It is infuriating to attempt to debug css w/o being able to manipulate it in-browser directly.

Upvotes: 4

Views: 1516

Answers (1)

Erik Funkenbusch
Erik Funkenbusch

Reputation: 93424

Did you click the refresh button in developer tools? It doesn't refresh the page, it reloads the dom from the current page.

Upvotes: 4

Related Questions