FireBug Tips and Tricks

There is so much power packed into this little FireFox plug-in. It is truly a revolutionary tool for web developers. Here is a quick and dirty set of its most powerful features.

To get started, open up firebug using F12 or by clicking its icon in the lower right corner of FireFox. To jump straight to the console and start typing commands you can use the Ctrl+Shift+L keyboard shortcut.

From here you can type commands. Try entering document. This will bring up the document DOM object and you can click on that link to get to the DOM and inspect all of the properties of the document object. A shortcut is also available by typing inspect(document) etc. You can use $ and $$ as in Prototype, such as $(‘firebug’) and inspect($$(‘.firebug’)). Use the up and down arrows to cycle through command history.

  • Use console.log and sprintf formatting commands for debugging.
  • Use console.info, console.warn and console.error to set your debugging levels.
  • Use console.time to log the time your functions take to run.
  • Use the error console to view the stack trace of the errors.

You can download Firebug Lite to make these methods work in Internet Explorer. I recommend that you remove your console commands before you go live.

Try Console logging test using console.log You can use sprintf formatting here.

function consoleIntro(){
 var x = "fubar";
 var y = 543;
 console.log("value of x is %s and value of y is %d", x, y);
}

Try Console Error Levels console.info|warn|error

function consoleLogLevels(){
 var a = "This is an info level message";
 var b = "This is a warn level message";
 var c = "This is an error level message";
 console.info(a);
 console.warn(b);
 console.error(c);
}

Try Timer logging console.time|timeEnd

function timeThisTask(){
 console.time("Sample Timer");
 for(x=100000;x>0;x--){}
 console.timeEnd("Sample Timer");
}

Try Error Stack Traces to see stack trace of the errors

function stack1(){
 var d = "fu";var e = "bar";var f = stack2(d,e)
 console.log(f);
}
function stack2(d,e){return stack3(d,e);}
function stack3(d,e){return UndefinedVariable;}

Use the debugger to add breakpoints, debug JavaScript code and step through your code.

There are 3 ways to trigger the debugger:

  1. Use the debugger command.
  2. Add a breakpoint by clicking on the line number
  3. Enable the “Break on All Errors” option for the Script tab.

Try a Deubgger Demo using the debugger command

function debugMe(){
 debugger;
 var g = 1;
 var h = new Date().getMilliseconds();
 while(g < 100){
  g *= 10;
  h -= g;
 }
}

Use the profiler to record detailed statistics on your Script calls and DOM events. This works very much like macros. To manually start profiling click on the profile button in the Console tab. Then try performing some actions on the page. When you are done click on the profile button again. A report is returned which captures the funtions that were called within that time period.

The report output data can be sorted. Own Time tells you how much time each function call took in milliseconds and as a percentage of the total time which can be useful in finding bottlenecks in your code.

Try Manual Profiler test using the manual profile feature

function profileMe(){
 timeThisTask();
 var timerlink = document.getElementById("tabs").
       getElementsByTagName('li')[2].firstChild;
 var typeNode = timerlink.nodeType;
 var nameNode = timerlink.nodeName;
 var valuNode = timerlink.nodeValue;
}

You can also add profilers to your code via the console.profile(“foo”) – console.profileEnd(“foo”) function calls. This can be great when you want to track down events that happen onload.

Try the Coded Profiler using console.profile|profileEnd command

function profiledFunction(){
 console.profile("Test Auto Profiler");
 timeThisTask();
 profileMe();
 console.profileEnd("Test Auto Profiler");
}

You can log calls to a specific function call and see what parameters are being passed to it and how many times it is being called. To do this open the script tab, find your function and right click within it. From the popup menu choose the “log calls to “function name”".

Now whenever that function is called you get a nice message in the console along with the parameter values sent to it.

Try the Logged Function test with logged functions

function callLoggedFunction(){
 for(x=0;x<2;x++){for(y=1;y>0;y--){loggedFuction(x,y);}}
}
function loggedFuction(x,y){
 if(y>x) console.info("y is greater than x");
}

In the HTML tab you can also log events for specific elements. This can be useful when you are creating elements on the fly via the DOM and want to track all the events happening behind the scenes.

The Net tab is quite useful for tracing HTTP request and responses. Network traffic can be filtered by type (HTML, CSS, JS, Images, XmlHttpRequest). The Params tab is very handy and shows you the request parameters in a table format. This is great for tracing your Ajax requests. The issue with this that I found is that once a request is made which leaves the current page you loose the previous pages net events. Maybe a feature for the next version of FireBug?

From the HTML tab you can use the Layout tab to view and edit any element’s offset, margin, border, padding and dimension values on the fly.

In the Style sub tab of the HTML tab you can choose an option to “Show Computed Style” which shows you the final style values of the selected HTML element. Another neat trick is that you can click on any CSS property and edit it inline in real time. You can use the up/down keys and page up/page down keys to change numeric values and see your changes in real time, for example padding etc.

Visited 50875 times, 12 so far today

13 Comments on “FireBug Tips and Tricks”

  1. Great article – submitted into queue @ tweako

  2. thanx for those tips, I especially appreciate the profiling options.

  3. You can also right-click on a breakpoint to add a condition.
    I’ll be bookmarking this to distribute to my development group, thanks. -Eric

  4. Thanks for some good tips. I didn’t know about logging functions, should come in handy.

  5. Fantastic resource. Thanks for all the depth of insight. I use Firebug every day, but I was not aware of some of these functions. The new DOM Explorer in IE is a welcome tool, but it looks like a pre-release beta next to the magic of Firebug.

  6. thanx for those tips, I especially appreciate the profiling options.

  7. Firebug can be used to debug your actionscript as well as your Javascript using a small as2 class I created called flashBug. It supports all the common Firebug console methods for debugging in the browser and it also formats and outputs trace calls for debugging in the Flash IDE (so you don’t need to call console and trace).

    The full write up, instructions and download is available from my blog at: debug actionscript using Firebug

  8. Very good article… Will always be on my frequently used bookmark list.

  9. Great article indeed….

  10. Thanks guys that was extremely helpful!

    sandeep verma

  11. Can I use Firebug to study link redirect?

    Thanks in advance

  12. 12

    From Chris Hyzer

    Regarding the previous post about using Firebug to study redirect, is this possible? I have the net history plugin and firebug, and when I do a login, I get redirected around, and I would like to see all the history. I see it briefly in the panel, and when the URLs change, it gets cleared. Any way to keep it all there? Thanks, Chris

  13. Cant get this to output anything at all.

    Any help on basic funtions, just getting firebug to display anything about my js code would be greatly appreciated.

Leave a Reply