IE8 has some outstanding developer tools built-in and can be accessed by pressing F12. If you happen to be viewing this in IE8, go ahead and press F12 now. After pressing F12, you may be really excited and have stopped reading this or you may be wondering how this could help you. I’ll cover some of my favorite functionality. For more complete documentation, please see Discovering Internet Explorer Developer Tools.
Compatibility Modes
IE8 renders content in IE8 standards mode by default. However, IE8 has the ability to render pages in IE8 Compatibility and IE7 Standards modes as well. One of the first benefits you may notice is that the tool tells you what the browser mode and document mode is for your page.
If I go to my blog, I can see that Browser Mode=IE8 and Document Mode=IE7 Standards
In this example, IE defaults to IE8 and Document mode is determined by the page’s <!DOCTYPE>.
Let’s say your web page is broken and you want to try different compatibility modes. This can be easily tested by clicking on the mode you want to change.
If you find that one of the compatibility modes fix your issue, follow the guidance in the IE8 – Defining Document Compatibility article.
Experiment by Changing Content and Code
Compatibility modes can be a workaround or a solution. However, you may just have a small issue that you want to fix or you may want to move your site to support IE8 Standards mode. The developer tools can help a great deal in finding problems and allowing you to try a fix.
Jumping to Content with Issues
Use the Find | Select Element by Click functionality to highlight the area in the page that has a problem. A blue box will highlight the section you are hovering over. Click the section and you will jump to that location in the content.
You can click on the html code to edit it. When you make a change to the content, it will be reflected in the current browser session. You can quickly experiment with potential fixes using this method.
Debugging Script
I don’t think this could be easier. You can quickly start debugging script by clicking the Script tab and clicking the Start Debugging tab.
You can now set breakpoints, look at call stacks, variable values, console errors, etc. Finding your issue may still be challenging but the tools at your disposal are very useful. One trick to find the piece of script you are interested in, click the Break All button.
Now, you can invoke the script you are interested in by clicking, typing or causing the event that you want to debug. The debugger will break at the first line of the script.
But Wait, There’s More…
I obviously haven’t covered everything. I wanted to show you some of the features I use to figure out compatibility problems. Please see Discovering Internet Explorer Developer Tools for more info.