Part 3: Debugging Tools for becoming a web programmer

BUGS! They need special care and attention. They need special tools too. This post is dedicated to squashing bugs. (This tutorial is a part of the series – “How to become a web programmer in 4 easy steps”. Read previous post here. )
Nailing bugs can be done with assistance from browsers. We will discuss tools that are available with the three major browsers in the market – IE 8, Firefox 3.5 and Google Chrome 3.0.


IE 8 packs Developer Tools, a powerful tool for debugging layout, CSS or JavaScript associated issues. It is available under Tools menu (Keyboard shortcut F12) as shown below.

Upon selecting the option, you are greeted with the Developer Tools.

HTML, CSS, Script source viewer and Profiler is available. Script allows breakpoints to be set, thus facilitating line by line debugging of JavaScript lines. A detailed discussion on using IE Developer Tools is available here.

Firefox comes naked without any debugging tools. It requires plugin to be installed, called Firebug. Once it is installed, a quick launch icon is seen at the status bar of the browser.

When it is clicked, a window similar to IE’s Developer Tool is cropped up gathering information from the page which is currently displayed.

Firebug is a superior tool than IE’s. Like IE, “F12” acts as keyboard shortcut. To learn the full capabilities of Firebug read this post.

And finally there comes my favourite browser, Chrome. Chrome comes with a Developer Tools of its own available under the page icon.

The resulting tool window has an assortment of tools stacked neatly at the top.

Get familiar with the tools that are available and read this tutorial for a complete understanding of this tool.

What’s next?

Doing things the standard way is time consuming – but it’s always a good practise to stick to, especially since you are starting out. HTML, CSS, JS – all of them can be validated. Part 4 of this tutorial explains how to do this with offline and online tools.