The IE DevToolbar
Comments(2) I introduce to you, the IE DevToolbar:
Now, I hear you thinking “But, that’s no toolbar, that’s a button!”. And you’d be absolutely right. The previous versions were in the form of a toolbar, but as of beta 3, they replaced it with a far more efficient button. You won’t hear me complaining.
The IE DevToolbar is a severely overlooked, but awesome tool for debugging your pages in IE7 (and IE6). It is currently at it’s third beta, and it is steadily increasing in usefulness. I have been using it since the first beta, but this third one really gets things going.
A rundown of the functions:
- A very capable DOM explorer
- Very expansive source view options
- Somewhat limited code editing options
- Handy colour picker
- An easy resizing option
- A menu to validate your HTML/CSS/links/feed/508, and local HTML and CSS.
- Also included is the option to validate in multiple ways at once
- A ruler
- Disable cache mode!
- A couple more, but they aren’t of much use
The Dom Explorer
Without doubt, the DOM inspector is the handiest thing in the toolbar. It offers a “Select element by click” option, much like Firebug for Firefox. Once you’ve clicked on an element, you will be able to see where in the source it is located, which attributes it has, and the best, what styling is applied to it. Including the most illusive hasLayout property. Many rendering-bug are still cause by an element having no hasLayout (When hasLayout is set to -1, the element has no layout).
Source View options
The DevToolbar has 4 options to view the source: original, dom (page), dom (element) and dom (element + style). The original mode is very much like the old “view source”, with the addition of numbered rows and coloured code.
Dom (page) adds code-collapsing functions to this, which is always handy with large pages.
dom (element) views only the selected element, with only it’s parent elements. Dom (elements + style) does the same, but tells you which rules in the CSS apply to your element. In addition it also tells you on which rows it found the rules.
Code editing options
Truth be told, the code editing options in the DevToolbar are limited. So limited in fact, that the only real editing you can do is add or remove attributes and their values. Handy for checking if one of your styles are causing problems, but not for much else.
It adds an easy CSS finder, though: When you right click one of the styles (See screenshot, the style view is on the right) and select “trace style”, it will search for the specific style in your stylesheet. The view of this stylesheet is coloured and numbered like the source view options.
The Rest
These are a couple of small functions that are just handy, but don’t require much explanation:
The ruler: You can measure stuff with it. seriously.
Colour picker: Lets you pick a colour and automatically copies the hex code to the clipboard.
Easy resizing options: much like the web developer toolbar for Firefox.
Easy validation options: Again, see web developer toolbar. Added value is the ability to ping multiple validation services at once. (meaning: you can check your HTML and your CSS with one click!)
Disable cache mode: during development, keeping your cache empty saves you from a lot of headache moments. Added value is the ability to disable cache only for the current website.
Conclusion
The IE DevToolbar is a nice tool, and should be standard equipment in every web developer’s arsenal. It offers options vital for debugging render errors in IE
Also, this is my first post here, I feel the urge to introduce myself: My name is Kilian Valkhof, And I am a student/web developer. I also blog at KilianValkhof.com, about a wider variety of web-related things. Feel free to drop by and leave a comment.
Feel free to give feedback on the article, and let the rest know when you agree or disagree with things said here.
