CODEWITHSUNDEEP
internet-explorerinternet-explorer-9ie-developer-tools
Jacques
Jacques

Reputation: 7135

F12 developer tools in IE9 not loading style tab information for dynamic content

I'm working on IE 7 and 8 HTML/CSS fixes, but when I use the Developer Tools and try to look at dynamically loaded HTML you first can't select the newly added elements, but then I read that you should hit the refresh in the toolbar which works. But, when you inspect any of the elements the style information in the style tab doesn't show properly.

All it shows is something like the following: inherited - html inherited - body inerhited - div inerhited - div inerhited - div

You can't expand these to see the actual attributes and values like you would with elements that aren't dynamically loaded.

Is there a workaround for this?

Regards, Jacques

Upvotes: 3

Views: 2122

Answers (3)

Phil Cooper
Phil Cooper

Reputation: 3123

There is.

It's a dirty workaround but should allow you to inspect elements that may have been added to the dom dynamically.

See the screenshot below:

Select element and edit buttons

If you can't pick an element (arrow button), click the edit button (with pencil) and you'll enter edit mode. Click edit again to exit edit mode and the elements should now be selectable.

"Edit mode"

Edit mode

Sometimes entering and exiting edit mode may leave have side effects but this technique works in most scenarios.

Upvotes: 3

MikeD
MikeD

Reputation: 5092

Have you tried FireBug lite? This is a version of FireBug that is written completely using JavaScript and it allows you to use most of the usual firebug features but in IE. It works in IE 6 and later.

I've used it successfully in the past when debugging on the iPad where, until iOS 6, there was no way to inspect the HTML. It works equally well on IE.

You can read more about it here: http://getfirebug.com/firebuglite

Upvotes: 0

Andy McCluggage
Andy McCluggage

Reputation: 38718

I've just run into this problem myself.

I use an extended version of Head.js to load stylesheet links as well as script files. I now have a specific IE8 styling bug that I need to investigate, but the dynamically added styles don't appear in the Developer Tools.

To debug it I think I'm going to have to temporarily add the css files statically. Chrome and Firefox dev tools handle this dynamic styling ok. That's fine if I have generic styling issue, but when it's IE specific I've got to jump through some hoops.

I can't think of a "solution" to this. Unfortunately we are at the mercy of the IE dev tools. Maybe IE 10 dev tools are better, but I'm on Windows 7 for now.

Upvotes: 0

Related Questions