29. August 2008 08:20
If you’re a web developer and you've ever worked on the client side then you've almost certainly used the incredible Firebug. If you work regularly in IE you may have also used the fantastic IE web tool bar. However, IE8 is the first browser to actually build one of these clever little add-ons right into the browser.
You can find the new feature in IE8 in Tools > Developer tools. Here are my favorite 10 things about it:
- It has a colour picker.
It's inherited one of the tiny tools from the IE web toolbar that allows you to click the colour picker then select any point on the web page and be told it's Hex value.
- Simple Prototyping
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.
- Source Searching
You can do this easily enough in notepad but searching through the HTML in the new Developer tools makes it easy to find text and see it’s context on the HTML tree. Also if you right click on the search item it’ll ask you if you want to copy the word, The inner HTML or the Outer HTML; which makes it really easy to cut and paste the actual content you want.
- Layout View
If you can’t get your head around the layout of a particular object. Click on the html or select the element by click then switch to Layout View to be given a graphical representation of the margin, padding, spacing and border for the selected object.
- Simple Resize
Click Tools > resize to resize the browser window to either: 800x600, 1024x768, 1280x768, 1280x1024 or set up a custom size. This enables you to test web pages in different screen resolutions quickly and easily.
- View Image information
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. Other Information that can be displayed includes, File Locations, dimensions and alt text.
- Element Highlighting
Click on Outline and make IE Visually outline Tables, Divs, Table Cells or Images.
- It’s baked in
As Developer tools is a part of the browser and not an add-in, it’s more efficient than the old IE Web Toolbar. This is because of the way Add-ons work in IE. Even if you are not using an Add-on it has it’s open thread working in the background for each tab or window you have open. As the new toolbar is actually part of the browser itself you can browse regularly in a separate tab or window without the overhead of having the toolbar switched on in the background.