Firebug Plugin in Firefox - a big time saver - find bugs faster
- Posted: 20th August 2010
- Created by: Robert
- Found in: jQuery
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.
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
<form id="main_form" method="post"></form>
//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.
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.
console.log('this is an alert instead of the general alert box');
- F12 will load/close the firebug window or tab depending how you set it up. (Windows machine)