Dynamically added stylesheet does not appear in IE Developer Tools

Question

I am working on a bookmarklet browser in which I need to enter my own stylesheet into the page, as well as various divs, etc. I work everywhere, but IE is now trying to debug some of the design issues.

I add my css to the document after the user clicks on his 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 extracted and applied to the div, etc. I create on the page, however, when I check the item in IE 9 Developer Tools, it does not show me any properties from the stylesheet that I added dynamically, only those style = "{}" attr.

In addition, mystyle.css does not appear in the drop-down list on the CSS tab, but it does have a corresponding element in its head, and the styles in it apply to dom correctly.

Any thoughts on how to get dev tools to recognize my new sheet? It is restless to try to debug css without being able to directly manipulate it in the browser.

Answer 1

Have you clicked the refresh button in developer tools? It does not refresh the page, it reloads dom from the current page.