Debugging in IE including Firebug like element highlighting and real time css editiing

There are ways especially with IE8 (which you can also run in IE7 compatible mode)

Javascript debugger
You can step through javascript and have IE break on failing js line. On IE8 hit F12 and the debugger opens.
- click Script tab to get to the html
- click Start Debugging button on toolbar
- to the right of Start Debugging button is a dropdown to select script
- click left column of js code to add a breakpoint (red ball). You should see breakpoints listed on the right.
Works well, I've used this to debug and find a number of issues.


Html element and css editor
IE8 offers a pretty good html element highlighted and editor too. On IE8 hit F12 and the debugger opens.
- click HTML tab to get to the html
- expand the html to get to your html
- clicking on an html node should highlight it on the browser page (useful to find where things are positioned)
- on right side is css applied which you can edit
- you can edit the html and add css styles real time, tab off to see the change take effect in IE8
- nice job IE team!


CSS - for IE6 you could also just add borders around your controls to see what's going on. Sometimes divs which work fine in FF are larger etc. in IE. Finding out whats really happening is a first step.

Use Charles http proxy debugger to monitor http requests and their contents (I use Firebug in FF but this for IE). It's a free download but times out after 30mins so have to restart.

There is a firebug lite which you can install for your IE pages. I've used a little but I think IE8 support is easier/better.