두리미 Just Do IT

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("top-nav").
       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.