The Internet Explorer Developer Toolbar is released as a free plug-in for Internet Explorer 6.0 and above. With this toolbar it is now possible for a developer to understand and correct the rendered HTML as good as a UI designer. It has a handful of useful feature which makes it possible for a developer. It is very simple to use and easy to install. Download the toolbar from the link found at the end of this article and install it. Moving forward, this article will help you to understand some of the very useful features that the toolbar offers to developers.

Once we install the toolbar we need to restart the IE to enable the toolbar.

Internet Explorer Developer Toolbar can be opened by clicking the arrow icon in Internet Explorer toolbar. Figure 1 shows the toolbar shortcut found in IE.

Figure 1 - Toolbar Shortcut

 

The Internet Explorer toolbar will open at the bottom of the window similar to the below figure.

Figure 2 - Toolbar

 

In the coming sections we will see how this toolbar can be used to understand and correct the rendered html.

 

Note: I have used my site www.codedigest.com to understand the usage of this toolbar.

 

The rendered HTML structure can be viewed using IE developer toolbar in an understandable way and by default, like a tree view on the left pane. Also, we can view attributes and styles which will be populated on the right pane of the toolbar once we select any element in the HTML DOM structure’s treeview. Figure 3 - HTML DOM Structure will show a sample DOM structure with attributes and styles populated.

Figure 3 - HTML DOM Structure

 

In the last section, we understood how to see the properties and styles by selecting elements from the HTML DOM structure’s treeview. If the page is very lengthy then selecting an element from DOM treeview will be very complicated to see its details. It will be very easy if we select the actual element from the IE window and in turn get the properties and styles populated in the right pane of the toolbar window.

This can be done by selecting Find > Select Element by Click option from the IE developer toolbar window. Refer below to Figure 4 for better understanding.

Figure 4 - Selecting an Element

 

 For example, if we want to make out the properties and style attributes of an IMG element which is on the middle of the page then we need to select the above option and click the required element from the IE window. This will populate the styles and properties of the element on the toolbar window similar to the figure below.

Figure 5 - Toolbar property Population

In figure 5, I have selected the article image button which in turn populated the attributes and styles of the image button shown in the toolbar window. Also, the treeview will automatically reflect the selection in the HTML DOM structure.

This is one of the very useful features of the IE developer toolbar which many developers will love. With this feature a developer can add or remove attributes to an HTML element that is rendered in IE without changing the actual HTML of the page in the server with a preview.

How to do this?

Select the element you need to change or add some attributes like we did in the last section. Click the green “+” button on the Attribute pane of the IE toolbar and select a new style or attribute from dropdown to specify a value. Refer the Figure 6 for selecting new property.

Figure 6 - New Property

Consider, if we want to increase the width of an image and have a preview. To do this, select the image element and reach the toolbar window then select the width property, enter a new value, and press enter to have a preview. Refer to Figure 7 where I have added width as 200px for the article image button with a preview. If the value entered matches our requirement then we can replicate the same in the HTML page on the server. Thus we can reduce the time taken for adjusting the element every time on the server and have a preview until we get the correct HTML output.

Figure 7 - Applying New Property

Note

Checking “Show Read-Only Properties” will show all the read only properties of the element which we can’t adjust to a new value. In the same way “Show Default Style Values” will show the default style value for the HTML element.

 

Also, we can use the “Find Element” option in the “Find” menu to select the elements rendered in the page. Using this menu we can find the HTML markups based on Element, Class, ID and Name of the element.

 

There are some useful utilities that can be found on the Tools menu of Internet Explorer toolbar. In the coming sections we will see some of the utilities and their usages.

Resolution Changer

This utility is used for resizing the IE window for different resolutions to customize the HTML design for best fit. We can resize the IE window for some fixed screen resolution like 800x600, 1024x768, 1280x768 and etc. Also, we can resize the window to any custom resolutions. This feature will prevent us from changing the actual screen resolution to check the HTML design's best fit for all resolutions.

Color Picker

This utility will help us to the get a color code by moving the mouse over any of the colors found on the HTML page. Refer below to figure 8 to see the Color Picker.

Figure 8 - Color Picker

 

Ruler

There is a ruler utility which will help us to measure the exact length of the elements. Refer to Figure 9 which shows the ruler measurement for the Search box on the rendered HTML page.

Figure 9 - Ruler

 

Once the color picker is enabled when we hit Ctrl+M key it will bring the magnifier (Figure 8).

Figure 8 - Magnifier

 

Other useful things that can be done through IE developer toolbar

·         We can disable scripts, Popups, and CSS associated with our page through the Disable menu. Also we can disable the image that is rendered on the page through image menu.

·         The View menu gives us the options for viewing CSS class, element ID’s, links, etc. This menu also gives an option to view the HTML source of the DOM rendered in the page. “CSS Selector Matches” option on this menu will gives us the report of number of matches a particular CSS class is used in the html page.

·         The outline menu gives us graphical outline of the html page elements like table, table cells, div tags, image, etc.

·         The image menu has the options to view ALT texts, size, dimensions and path of the image element.

·         The other useful feature that the toolbar offer us is disabling or clearing cookies, sessions etc. The option “Always Refresh from server” make the page to always refresh page from the server instead of using any temporary cache.

·         We have a validation menu through which we can validate our HTML, RSS, and CSS, etc.

Download Toolbar

 

Conclusion

With this cool toolbar, a developer can become a much better web designer. Thanks to Microsoft for providing such a useful toolbar. Visit the link given in the download section of this article and see it in action.