To solve pesky IE-only layout and CSS issues, I'm trying to use IE9's developer tools to iteratively edit HTML and CSS. Ideally I can get parity with the DOM/CSS-manipulation workflow that I'm used to doing with Firebug and Webkit's Inspector. In other words, I want to be able to repeatedly edit HTML and CSS of a single element or group of elements, and then see my changes reflected immediately on-screen. I've figured out the F12 tools' "full-page" editing features, where you can edit the entire page's HTML or all CSS as a bloc, but even after several hours of using the tool, reading the online help and many Google searches, I'm still struggling with the kind of finer-grained editing that I'm used to with Firebug. Before I give up, does anyone know how to use the F12 tools to... ...edit a particular element and its children, not the entire page at once? (like firebug's "edit HTML" context-menu) ...see changes made in the edit view show up imediately in the browser, rather than having to exit the edit view to see changes? ...easily locate the currently-selected element (the one with the blue square around it) in the edit view? ...remove a single element? (in firebug I can just select the element and click "delete") ...add a new style to a class without having to hunt through every style in the document to find the one that applies to the element I care about? (In firebug I can just double-click on the style in the right pane). If the things above are not possible with IE's F12 tools, then is there a good alternative plugin for DOM/CSS editing? BTW, my intent with this question is not to bash the IE9 dev tools (kudos to Microsoft for including these out of the box) but to learn how to be more productive using them. Also BTW, I've already read through 20-ish other StackOverflow questions about a firebug equivalent on IE, but most of them seem to be about javascript debugging and read-only DOM inspection. I didn't find any recent (IE9) ones about writing DOM/CSS. Hence I'm asking yet another question on this topic... my apologies if this is a dupe.

cssfirebuginternet-explorer-9web-inspectorweb-developer-toolbar

Reputation: 46673

Granular DOM/CSS editing using IE9 F12 developer tools: possible?

To solve pesky IE-only layout and CSS issues, I'm trying to use IE9's developer tools to iteratively edit HTML and CSS. Ideally I can get parity with the DOM/CSS-manipulation workflow that I'm used to doing with Firebug and Webkit's Inspector.

In other words, I want to be able to repeatedly edit HTML and CSS of a single element or group of elements, and then see my changes reflected immediately on-screen.

I've figured out the F12 tools' "full-page" editing features, where you can edit the entire page's HTML or all CSS as a bloc, but even after several hours of using the tool, reading the online help and many Google searches, I'm still struggling with the kind of finer-grained editing that I'm used to with Firebug.

Before I give up, does anyone know how to use the F12 tools to...

...edit a particular element and its children, not the entire page at once? (like firebug's "edit HTML" context-menu)
...see changes made in the edit view show up imediately in the browser, rather than having to exit the edit view to see changes?
...easily locate the currently-selected element (the one with the blue square around it) in the edit view?
...remove a single element? (in firebug I can just select the element and click "delete")
...add a new style to a class without having to hunt through every style in the document to find the one that applies to the element I care about? (In firebug I can just double-click on the style in the right pane).

If the things above are not possible with IE's F12 tools, then is there a good alternative plugin for DOM/CSS editing?

BTW, my intent with this question is not to bash the IE9 dev tools (kudos to Microsoft for including these out of the box) but to learn how to be more productive using them.

Also BTW, I've already read through 20-ish other StackOverflow questions about a firebug equivalent on IE, but most of them seem to be about javascript debugging and read-only DOM inspection. I didn't find any recent (IE9) ones about writing DOM/CSS. Hence I'm asking yet another question on this topic... my apologies if this is a dupe.

Upvotes: 7

Answers (3)

Yosh613

Reputation: 61

This is possible but I agree not very intuitive.

press F12 to get the developer tools window (ie9).
select the CSS tab (top left of window below menu bar)
select the css file you wish to modify from the drop down list.
select the right click on the appropriate place and the context menu will allow adding/deleting whatever you like
to modify an attrbiute just click on the value and change it

hope it helps

Upvotes: 4