IE Developer Toolbar – A nice tool for Web (UI) developer

IE Developer Toolbar is one of the tools that I really like while doing Web (UI) development. Normally we make changes in html code and then see its effect in browser. Whereas with IE Developer Toolbar, I make changes in browser and after getting exact required effect in page, write the required html code.


Problem while configuring the IE Developer Toolbar:
I faced a problem with IE Developer Toolbar installation. After IE Developer Toolbar installation, I was unable to access its various functionalities. So I did following changes to make IE Developer Toolbar fully functional:

1) Open the Windows Components Wizard.

(Control Panel -> Add or Remove Programs -> Add / Remove Windows Components)

2) Uncheck the Internet Explorer Enhanced Security Configuration checkbox.

3) Complete the wizard by clicking the Next / Finish button.

How to open the IE Developer Toolbar pane:
There are 3 ways that I know to open the IE Developer Toolbar in IE-7 browser:

1) Toolbar (at top of the browser, below address bar) -> View -> Explorer Bar -> IE Developer Toolbar

2) Tools (at top-right corner of the browser) -> Toolbars -> Explorer Bar -> IE Developer Toolbar

3) Double arrow (at extreme top-right of the browser) -> IE Developer Toolbar

I liked the 3 rd way to open the IE Developer Toolbar, because it’s very quick to open as compare to other ways.

3 Most nice features / functionalities of IE Developer (as per me):

1) We can see the final rendered html code with or without its applied CSS styles. Here we can easily distinguish that whether the applied style is inline style or external style.

To check the html code with / without style, select a particular html element / node in IE Developer Toolbar pane. Right-click that particular element/node, a pop-up will displays 3 menus in it. Select appropriate menu as per requirement.

2) Ruler: If you want to determine / check the size of some html element like image then this ruler is really a nice tool to use.

To open / hide Ruler, click the Tools menu in IE Developer Toolbar pane, and then click Show / Hide Ruler.

Now select a particular html element (like image in above figure), select the color you want for better visibility (black is default one). Start dragging your mouse by Left-clicking at start point and stop dragging at the required end-point. This displays the co-ordinate of Start and End point, also the Width / Height between the two points.

3) We can change / add new html attribute and its value.

Here in the above diagram, I am adding a new html attribute named background-color to the selected textbox.

I set the background-color value to Green, and press enter to see its effect. This results in the green background-color of the selected textbox (as shown in above figure).
Similarly we can add / delete / update the html attribute and its value.

How to add reference of a DLL/Assembly registered in Global Assembly Cache (GAC)

To add the reference of a DLL/Assembly in .Net project, usually we right-click the Solution in Solution Explorer and click the Add Reference menu.

After clicking the Add Reference menu, Add Reference pop-up dialog box gets open.

If the DLL/assembly is .Net based one, then we click .Net tab else we browse to the DLL/assembly by clicking the Browse tab.

Here the problem comes; if the DLL/assembly is GAC registered then we can’t directly browse to C:\Windows\Assembly and select the DLL/assembly.

For example, I registered a SampleWebParts DLL/assembly in GAC, so to access it first open the Command Prompt. Then go to following location using CD command:

C:\>cd WINDOWS\assembly\GAC_MSIL\SampleWebParts\1.0.0.0__992b220d2c0fa2a6

Note: SampleWebParts is my DLL name. SampleWebParts directory contains only one folder with name starting with 1.0.0. … .


Now if we check the directory contents with Dir command then we can see our required DLL.
So copy the above path and combine it with DLL name.
C:\WINDOWS\assembly\GAC_MSIL\SampleWebParts\1.0.0.0__992b220d2c0fa2a6\SampleWebParts.dll


Paste the above complete path in File Name area of Add Reference dialog box.

Press OK button to add the reference of a DLL/Assembly registered in Global Assembly Cache (GAC) in your desired solution.