You can open the Developer Tools by pressing F12 or by clicking the Developer Tools option in the Tools menu on the Windows Internet Explorer toolbar.
IE8 is a standard compliant browser and that means that some of the sites you may have developed prior to IE 8 may have to be reworked to be standards compliant. Don’t worry though … IE 8 has a much needed “Emulate IE7″ button that you will turn on for most of your browsing. And this button renders the site as if its rendering in IE7. Well, the real magic comes in when you launch the IE 8 Developer Tools and realize just how much power there is in using them on a site.
Here is a list of some of the awesome features of Developer Tools in IE8 -
Path : Open Developer Tools -> Click Script Tab -> Set Breakpoints and Refresh the associated web page
It allows you to click the color picker then select any point on the web page and be told it’s Hex value. This is a tiny utility but is very powerful wehn it comes to web development and CSS designing.
Path : Open Developer Tools -> Click Tools -> Show Color Picker (Ctrl + K)
Every change you make to the HTML or CSS is immediately reflected in the browser. This makes it easy to take a page and edit the CSS or HTML on the fly. Once your happy with the changes you can just click to save the files.
Path : Open Developer Tools -> Click Profiler Tab
Layout View (Worth a million)
If you are not able to figure out the layout of a particular object. Click on the html code or select the element by clicking on it and then switch to Layout View to be given a graphical representation of the Layout.Layout provides info on margin, padding, spacing and border for the selected object.
Path : Open Developer Tools -> Click HTML Tab -> Select the HTML element -> Click on Layout button on the right hand side icon bar at top
Test web page on different browser resolutions with one click
Resize the browser window to either: 800×600, 1024×768, 1280×768, 1280×1024 or set up a custom size. This enables you to test web pages in different screen resolutions quickly and easily.
Path : Open Developer Tools -> Click Tools -> Resize
View Image related info
Click on Image > Show Image Sizes for all the image sizes to be shown onscreen, so you can easily see if any are larger than they need to be. Bug Alert: You will not be bale to see the size though if image area is lesser then the text display for size. There are other great options if you click on Images on tool bar like – View Alt text, File locations, Dimensions etc.
Path : Open Developer Tools -> Click Images -> Show Image File Sizes
Page Element Highlighting (This feature kicks ass)
You can make IE Visually outline Tables, Divs, Table Cells ,Images or any element on the page.
Path : Open Developer Tools -> Click Outline
And remember Developer tools is a part of the browser and not an add-in. I am not going to compare Developer Tools with Firebug. But I must say that one thing about Firefox. It forces Microsoft to try to do better stuff, even if it means copying features and interface design in some way. Without Firefox, I bet notepad would still be the source viewer of IE.
I am a long-time user of Firefox and Firebug and can not imagine developing without it, but the fact is that I usually have to support IE and Developer Tools seems similar to Firebug in its capabilities and is a welcome addition to the IE offering. Plus, You should embrace all user agents as much as possible.
We as developers do welcome this fantastic upgrade by Microsoft.