Developer Tools For Different Browsers

I know it's been a while since I posted anything but I have found something to talk about really quickly. When I work on a site that has tables and such in it like you'd find in a CMS (Content Management System) environment I need to find out what CSS classes are in the pages. What comes in handy is the Developer toolbars that are available in many of the browsers. I started off using Firefox's Firebug a couple years ago and then moved on to the IE Developer Toolbar. What I liked about the IEDT is that it highlighted the different elements on the page when you hovered over the code in the toolbar. You can expand out the various DIV's or TR's, etc. I then found out that Opera, Safari and even Chrome all have their own Developer Toolbars. They are named differently: Opera has Dragonfly, Firefox has Firebug, Internet Explorer has Developer Toolbar, Safari has Web Inspector and Chrome has Inspector.

All of the toolbars are similar in what they display but how they display it is different sometimes for each. There are other things that you can use these Developer Toolbars for like Scripts and such but since I use them primarily to troubleshoot CSS I won't touch on that.

Internet Explorer Developer Toolbar

The IE Developer Toolbar is nice because it is straight forward and all the options are presented up front. You can dock the toolbar in the window or have it seperate in it's own window. Drilling down into the HTML is as easy as expanding the tree. It also gives you the CSS classes and attributes. When hovering over DIV sections and such in the code it will outline the section of the page that it controls.
One drawback is that it doesn't come pre-installed with the browser. You have to download and install it yourself. Oh, and it's only for IE7.

Firefox Firebug

Firebug has a nice interface that gives you more room to view the code. Also a nice feature is that it makes DIV names and images and such red for easy identification. The other thing that I like with Firebug is when you hover over a DIV or such in the HTML code in the inspector it highlights the area on the page with a semi-transparent box. It's much more obvious than the outline that IEDT uses.

One of the cool things that I have discovered with Firebug is when you hover over an image reference in the HTML code it pops up a thumbnail of that image. Very cool!

Also, it is has to be downloaded and installed.

Opera Dragonfly

I haven't used Dragonfly very much. I just stumbled across it recently but found it similar to Firebug. It assigns different colors to the areas of the HTML for easy reading and such. It also has a nice handy Metrics box model that illustrated the CSS borders, padding and margins that are applied to a DIV. Another nice feature I found is that is actually displays the entire stylesheet that is affecting that page.

One of the not-so-impressive things is that is outlines the area of the page when you click on the HTML just like IEDT. It also has a nice 'breadcrumb navigation' at the bottom of the window to follow where you are in the code.

Comes installed with the browser.

Chrome Inspector

Chrome's Inspector toolbar is simple but effective. It does seem to have all the bells and whistles of the other toolbars and it does put the semi-transparent box over the area of the page when you hover over the code in the inspector. It's nice to not have to click the actual code to see what area it affects. You get the Metrics box model as well as properties for elements. It offers a Resources tab that I haven't figured out what it does yet. Something about Time and Size.

Inspector comes installed with the browser but to access it you have to right-click somewhere on the page and select 'Inspect Element'.

Safari Web Inspector

While Safari's Web Inspector is nice and sleek and tricked-out looking I was less than impressed that it didn't highlight areas on the page when you hoverd over or clicked on areas in the HTML. (There may be an option to turn that on but I haven't found it and I would think that it would be on by default.)

It will show you all the images in the left navigation column and when you click on one it will display in the center. It will also show you the entire stylesheet affecting that page.

All in all, each of these has nice features and I've found myself using more than one sometimes on a project to find out what was affecting an element or something. If I was put on the spot and had to pick one to use it would probably be Firebug because I really like the semi-transparent box thing as well as the different elements being different colors in the code for easy reading. I know other Dev Toolbars have these things but I'm more comfortable with Firebug. But, since I'm not limited to one I will continue to use each of them. It also helps to debug problems when you are trying to style for each of the browsers. ;-)