动态添加的样式表未显示在IE Developer Tools中

Question

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.

Answer 1

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