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
- 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.
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?