I delve a little bit into web development and WordPress theme customization as you can see right here. One tool I find indispensable is the Firebug Firefox extension. I can view/edit and play with live HTML/CSS code for any web page and see the possible results live for the tweak I am doing.

You can browse through the DOM tree of a webpage with Firebug. It also helps me to look up HTML & CSS code for various parts of a website using the ‘Inspect’ tool. This works great for troubleshooting or developing and viewing sites in a Firefox browser.

For those odd occasions when there is a problem in just Internet Explorer, I have always been at a loss of not having a tool like Firebug.

Until, I came across Developer Toolbar for IE developed by Microsoft recently. Even though this tool has been around for a while, it must be a well kept secret or I must have just gotten my head out of the sand.

I found it useful to troubleshoot some IE-only CSS bugs on some themes my wife and I were customizing. Let’s look at a few things this toolbar will you give after installation:

IE Developer Toolbar Quick Facts

• An easy access button to toggle the toolbar to view or hide
• Lets you view DOM for the current page in a tree view - similar to Firefox’s DOM Inspector
• Selecting an element in tree lets you view attribute and the current styles for the element
• You can disable images, javascripts and css
• Style Tracer - helps you find exactly where and which style sheet, a rule is effecting a particular element.
• Offers a View Source that lets you view source of the original page, currently rendered page or just the selected element. I like the way it shows the current styles associated with elements right in the view source.
• An Outline option outlines DIVs, images, tables, table cells, etc.
• A Validator tool cal validate HTML, CSS, Feed & Links in a webpage
• I like the Find & Cache options as well.

If you have used Firebug or Web Developer Toolbar for Firefox, a lot of these features will be very familiar to you.

Download IE Developer Toolbar

Even if you are not a web developer, if you occasionally tweak HTML & CSS for your website/blog, I highly recommend getting used to a tool such as this one. I use it as a learning tool to see how someone has coded something or used CSS to style an element that I find interesting when I am surfing the web.

Plus, I can make changes to fonts or any CSS code for my blog in Firebug without and have a preview without having to modify any code in the server.

What kind of tool do you use for your web development needs?

Hello newcomer, did I say welcome to ShanKri-la yet? Before you move on, just wanted to thank you for visiting and we hope you come back and see us again!

If you enjoyed this post, get regular updates with our RSS Feed!