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.
Upon selecting the option, you are greeted with the Developer Tools.
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.
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.