Skip to Content Skip to Menu

Firebug Plugin in Firefox - a big time saver - find bugs faster

If you haven't played around with firebug before - or even used firefox, it would be a good thing to explore if you are a web developer. Of course this is a very general article but it will cover some of the uses that I have for firebug on a regular basis. This article also assumes you have read some of the firebug instructions.

Inspecting elements

I use this a large amount of the time when working on the design and layout of a website. It is especially handy when working on projects you have no previous knowledge of.

The typical way to test for design bugs would have been:

  • view the source until you find the spot you think the element is
  • add a coloured border to the css to double check that was the correct element
  • then apply you fixes refreshing the page everytime a change is implemented

Now using firebug html tab and inspector:

  • inspect the element directly - which then shows you the source and the css applied to the element as well as highlighting the padding and margins of the element.
  • using the html tab and css view next to it you can
    • Add/edit/delete values directly and see it happen on the fly
    • Add/edit/delete attributes on the element and also see it happen on the fly

Debugging javascript

I use the console in firebug on a regular basis to debug javascript (including jQuery & prototype library code). You can type in javascript to execute on the fly; which means you can run the functions in your code to test what the results are. For an example, I've worked on websites that use prototype and jQuery libraries. Now using both these libraries is fine but you need to be aware they both use the dollar sign $ to initialise their library functions. See the article here to describe this more.

Quick example:

HTML

 <form id="main_form" method="post"></form>

Javascript to run in the console

//test if prototype running
$('main_form') //run that in the console

//test if jquery is running
$('#main_form') //run that in the console

The command that returns a form element is the library that is running on that element.

Javascript in the console

You can use console.log() over the alert() function to display outputs while debugging. The console also shows when ajax calls are run including the paramaters sent, data returned and the header status; which are all important when debugging ajax.

//in your javascript code
console.log('this is an alert instead of the general alert box');

Random notes

  • F12 will load/close the firebug window or tab depending how you set it up. (Windows machine)