Easy Guide to Install and Use Firebug

Hi guys, I thought I’d write a quick post on how to use Firebug and FireQuery to see and debug your jQuery code (at the same time as HTML/CSS etc) and also inject live code into webpages to test jQuery effects. In this post I shall write about:

1. How to install Firebug
2. About FireQuery – a Firebug Extension for jQuery
3. How to use Firebug with FireQuery to inject jQuery Code into a webpage.

What is Firebug?

“Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.” Read More…

Key Features:

• Live edit of HTML, CSS, JavaScript, jQuery
• Explore DOM elements and attributes
• JavaScript Logging
• Monitor Network Activity

How to setup Firebug?

1. Download and Install Firefox web browser (current v3.6)

2. Download Firebug (currently v1.6 is compatiable with Firefox v3.6)

Firebug should now appear as one of your Firefox add-ons.

Note: If your currently using Firefox it will ask to restart the browser to finalise the install.

3.  You should now see a little bug icon at the bottom right of your browser. This is the firebug icon which you can click to activate firebug.

Enable the script panel if it is disabled.

Select the jQuery script you wish to inspect.

The jQuery code should now be visible and ready to inspect & debug.

FireQuery – A Firebug Extension for jQuery

With FireQuery you can inject your jQuery into any web page live (sounds great doesn’t it!). Make sure when you install FireQuery that it works with your Firebug version and browser version (try it on the test page link below). It is still in early stages of  “life” so be aware that it may not be perfect – but with 234,000 downloads who’s going to argue with that?!

Download Page
Test Page

How to use Firebug with FireQuery to inject jQuery Code into a webpage

1. Load firefox
2. Load the webpage you wish to add jQuery code to
3. Click firebug icon to load
4. Click jQuery (important to click the jQuery button incase  the webpage doesn’t already have jQuery running)
5. Use the command prompt to run some jQuery code on the webpages DOM elements.

Working example: Display a message when the google logo is clicked

1. Go to http://google.com

2. Load Firebug

3. Click jQuery (click the”jQuerify” button).

4. We can inspect the google logo element to retrieve its Id which is “hplogo” (no idea why its not just called logo…)

5. Type in the following code in the jQuery command window (on the right in screenshot but can appear as a single prompt line below the main code window (showing the html above):

$('#hplogo').bind('click', function(){
    alert("Hello, I'm Google from jQuery4u!");
});

Now clicking on the Google logo should display your message!