I love firebug, I’d go as far as saying the main reason you’d want to download the browser to use use this fantastic little bit of functionality. This handy little tool allows for the debugging, editing, and monitoring of any website's CSS, HTML or JavaScript. It’s also very handy for working with JQuery.
Adding Firebug to your browser
First you need a copy of Firefox which you can get from the web. (Note: you should be on FireFox v3 or higher to use FireBug)
Once you’ve started Firefox go to Tools/Add-ins from the menu.
Click “Get Add-on” in the upper left hand corner and type “FireBug” into the search field below and hit Enter..
Firebug should be the first one returned. Click the “add to Firefox” button
Click the Install Now button and close the Add-In window and restart FireFox.
Now you should be able to see the Firebug logo in the bottom right Hand corner, click this at any time to start the Add-in.
Using Fire Bug to view HTML and run Scripts.
On any webpage click the bug icon.
A window will appear below showing all the HTML on that page which can be easily navigated.
To run a script click on the Console tab.
Click on the Console box and hit the “Apply settings to <server name>”
You will need to expand the Console window by clicking the red arrow in the bottom left hand corner.
Enter your script into this box and click Run.
e.g. Before
after hitting Run.
As you can see the word “Hello” has been added to the DIV named “theDiv”. The left hand side of the screen returns the results or any errors encountered on that JQuery script.
