Randy Jones

Buzz, Rants and Raves... Bear with me as I opine from the .Net trenches.

IE Developer Toolbar

I realized again today how much I appreciate this tool. I am constantly showing other developers the power in this little gem and I find it a huge time saver debugging rendering issue in IE. (the download is linked below)

Before any of the Firefox zealots comment on FireBug or the Firefox developer toolbar, I know, I know, I know. You had it first, yours is better, blah, blah, blah. I find you almost as annoying as gnats, Mac zealots and Viagra spam; I just don't know which of you are worse yet! In other words, don't waste space with your comments because you see, we just don't care.

Back on topic... I blogged about this over a year ago and I am still using it today. Basically it walks the DOM and creates a tree view so that you can search elements of the DOM. You can also choose to find and element by clicking any area of the page that you are having trouble with. In the far right column you can right click on any style and click "Trace Style" and it will take you right to the line in the CSS file or tell you if it is an inline style.

CSS is one of the worst implementations for UI design ever created. Up until the tools in Firefox and IE, it could take hours to follow inherited styles and styles that bleed into each other. Now it is within a few clicks and you find the offending line of code. One other feature I find nice is that you can view the in memory representations of the DOM. For those of us that have been using DHTML and using InnerHTML to alter code on the client, it is great. I remember copying screens and pasting them in other WYSIWYG editors to see the actual html behind it. Since it was a change to the DOM in memory only, viewing the source was useless.

This is a list pulled from the Microsoft website showing some of the features available.

  • Explore and modify the document object model (DOM) of a Web page.
  • Locate and select specific elements on a Web page through a variety of techniques.
  • Selectively disable Internet Explorer settings.
  • View HTML object class names, ID's, and details such as link paths, tab index values, and access keys.
  • Outline tables, table cells, images, or selected tags.
  • Validate HTML, CSS, WAI, and RSS web feed links.
  • Display image dimensions, file sizes, path information, and alternate (ALT) text.
  • Immediately resize the browser window to a new resolution.
  • Selectively clear the browser cache and saved cookies. Choose from all objects or those associated with a given domain.
  • Display a fully featured design ruler to help accurately align and measure objects on your pages.
  • Find the style rules used to set specific style values on an element.
  • View the formatted and syntax colored source of HTML and CSS.

    • Here is a link, try it out and comment back with your thoughts. download

    P.S. If your a Firefox zealot who was offended, please relax and I am sorry about your little issue. I am sure I can dig up one of those old spam messages to forward your way. ;)

    Posted: Sep 13 2007, 10:54 PM by Randy Jones | with 15 comment(s)
    Filed under:

    Comments

    John S. said:

    I'm hardly a Firefox zealot as I'm probably one of the 4 defenders of IE out there (both browsers are doing a fine job with terrible "standards") and I use the IE Dev Toolbar everyday...but it still pales in comparison to Firebug. I'd pay to have Firebug in IE. The IE toolbar does a fine job of outlining/disabling/enabling things, but its poorly organized, doesn't do anything with JavaScript and just overall is subpar compared to Firebug. Sorry to have to make the comparison, but if you're enjoying the IE Dev Toolbar so much, I'm surprised you haven't made the leap to Firebug.

    # September 14, 2007 12:58 AM

    Randy Jones said:

    Hmm, follows instruction. Nope...

    All kidding aside, it's a free country and were all entitled to our opinions, mine happens to be just right for me. I have used the other tools as well. Since we develop for the internet, we tend to have to test on IE, Firefox and Opera at a minimum. My daily browser and my favorite is IE. I use it well over 90% of the time. I happen to like my experience in IE and the toolbar.

    Firebug fills some of the gaps that those of us who use VS don't have. I realize a lot of developers don't have the tools. My dad was a mechanic and taught me the importance of having the best tools for your trade. In his, it was Snap-On tools, for me it is the VS IDE and the other tools that enhance that experience. Until the tools I have fail to meet my needs I see no need to change. I am sure you feel the same in your approach.

    My point about wasting comment space was simply this. I don't care, nor do most of the developers I know who focus on MS technologies, that someone out there claims Firefox had it first or is better. It is just an annoyance like a gnat flying around us.

    My goal is to help those that are unaware of the existence of these tools. They really can't go wrong using one or all of them.

    By the way, I love the cheat sheets on your site. Great job on providing great resources!

    # September 14, 2007 1:38 AM

    Joe Chung said:

    Firebug was first.  Firebug is better.  Nobody reading your blog really cares that you don't care.

    # September 14, 2007 9:37 AM

    Jason W said:

    Now ... if only it showed up after you installed it.  Oh well, guess I'll have to go back to using my Fire* tools. =)

    # September 14, 2007 11:21 AM

    Randy Jones said:

    Nice one Joe, I think mommy is calling you for a diaper change. ;) When you hit puberty maybe you're comments will be more meaningful.

    # September 14, 2007 11:24 AM

    Jalf said:

    Um. You don't *care* that a better tool is available?

    I only recently found the IE Dev toolbar, and yes, it's very nice to have.

    It doesn't compare to Firebug, but unlike Firebug, it lets me debug all those IE-specific problems.

    And no, having Visual Studio is no replacement. True, VS gives you a way to debug javascript, but not as well integrated with the browser where it's actually executed. And it still doesn't fix the half dozen other shortcomings that the IE toolbar can't handle, but FireBug does for you.

    "My point about wasting comment space was simply this. I don't care, nor do most of the developers I know who focus on MS technologies"

    And you don't think this is a problem? I use MS technologies, we use ASP.NET exclusively at work. And yet I also care about 1) ensuring things work on non-MS browsers as well, and 2) I care about just getting the best possible developer tools for my own use.

    Unless you seriously mean that you only intend for your sites to work in IE, then you *should* care. Not about who "had it first", but about being able to debug the problems that occur in the easiest way possible, and even if they only occur in some browsers. The IE toolbar is a godsend for this, because it lets me know what IE is thinking when it acts different than other browsers.

    Firebug is brilliant for figuring out what Firefox is thinking when it renders a page. So there's no excuse for not using *both* to figure out the browser-specific issues.

    And when the problem isn't browser-dependant? Why not use the one that has the richest feature-set? IE's toolbar letting me navigate the DOM and see where styles are coming from is fine, but what if I want to *change* the styles and see the effect? It doesn't let me do that. Having to tab out to VS, make changes, save, back to the browser and refresh is just a huge waste of time.

    It is funny though. It seems these days Microsoft developers themselves are more open to using (and  playing nice with) 3rd party software than so-called independent consultants.

    "Nice one Joe, I think mommy is calling you for a diaper change. ;) When you hit puberty maybe you're comments will be more meaningful."

    Unfortunately, that comment is quite meaningful too. It tells us more than we need to know about yourself.

    # September 14, 2007 12:32 PM

    Randy Jones said:

    Well said but yet another waste of space. My last comment was merely that adults don't tend to sling children’s comments around. Those that know me know I am very opinionated; I also try not to take life too seriously and joke around a bit (a bit too much some might say).

    My other point seems wasted with you and that is okay. I do however test my sites, especially public facing sites in IE, Firefox and Opera. My tools have not let me down yet; when they do I am sure I will expand on them.

    On the other hand, I won't sit here and bash your choice of tools since they suite you quite nicely. It's always a personal choice in these matters. I just wish some of the Firefox zealots would mature to the point where they don't feel they have to come to MS centric sites and bash those who don't give a rip about the negative comments. If they were informative, say a feature by feature rundown and why the tools can add value then great, but I rarely see anything remotely informative about them, it's more the schoolyard antics of my Tonka truck is better than yours kind of comment.

    It is humorous though so I don't dare delete them. I like a good laugh during the day. As long as no one is abusive or using foul language then life is good.

    # September 14, 2007 1:39 PM

    Matthew Doyle said:

    I think the point Randy is making for this blog post is that he recognizes there may be other tools out there... probably better than the IE Developer Toolbar, but he is commenting how much it has saved time for him--not how its BETTER than any other tool.  He then goes on to say HOW it saves him.  I still do not see him putting down any other tools.

    With that said, I use pretty much anything I can get my hands on.  I use the IE Developer Toolbar for a few reasons... 1) it's better than nothing.  2) Sometimes, Firebug is overkill and slows down my development, especially when I just want to edit the DOM, not sift through my AJAX calls. 3) Sometimes my problems are IE specific, and I need such a tool to help me.

    Thanks for reminding the programming world of this generally looked-over tool.  

    # September 14, 2007 2:30 PM

    thedeath said:

    i love this tool from ie.

    since i got this tool, i stop using ff's web developer addons and never go back!!!

    i still love ff and use it a lot more than ie on daily base b/c it give me a lot of useful addons which ie lack of.

    but when it come to work i found my self stick with this tool from ie.

    next, can somebody make an addons or whatever allow us run ie6 on vista? please!  (not Virtual PC)

    or i will just have to go back to xp

    # December 19, 2007 8:59 PM

    cashstrom said:

    Hi I am able to have my site www.cashstrom.com working in IE but not in other browsers. Can any one help?

    # June 24, 2008 5:18 AM

    William said:

    Icannot seem to find out how to manipulate the DOM,or edit any html with IE developer toolbar???

    FF firebug, is basically double click on the element and boom , your editing.

    # November 10, 2008 4:01 PM

    buyusedcars said:

    Wow! what an idea ! What a concept ! Beautiful .. Amazing ... :)

    # September 15, 2009 3:40 AM

    shelpblethy said:

    In searching for sites related to web hosing and specifically comparison hosting linux plan web, your site came up.

    # October 11, 2009 9:29 PM

    shelpblethy said:

    In searching for sites related to web hosing and specifically comparison hosting linux plan web, your site came up.

    # October 17, 2009 1:40 AM

    Joe Cruz said:

    This makes me remember something my uncle pretty much always said...

    But it is so not appropriate right this moment...

    # November 11, 2009 3:02 PM
    Leave a Comment

    (required) 

    (required) 

    (optional)

    (required)