JavaScript Profiling through Firebug’s Console API.

Sometimes we want to know which line of codes or methods in the JavaScript is taking time which slows up the page load. Many times our browser gets hanged due to the execution of JavaScript.

Firebug allows us to profile the JavaScript. Following are the two methods that are used for profiling JavaScript:
console.profile()
console.profileEnd()

After the execution of the JS, Firebug generates a nice stats through which one can figure out the problematic line of code(if any).

Type this following code in an HTML file, save it and open it up with Firebug enabled Firefox(if Firebug is not enabled then press F12 key to activate it):

Click this button to profile JavaScript 

Click on the button to start the JavaScript profiler. You would see the table is generated in the Firebug’s Console panel.

Description and purpose of the columns:
Function: This column shows the name of each function.
Call: It shows the count of how many a particular function has been invoked. (3 times for loop() function in our case.)
Percent: It shows the time consuming of each function in percentage.
Own Time: It shows the duration of an own script in a particular function. For example, foo() function has none of its own code. Instead, it is just calling other functions. So, its own execution time will be approx ~0ms. If you want to see some values for that column, add some looping in this function.
Time: It shows the duration of execution from start point of a function to the end point of a function. For example, foo() has no code. So, its own execution time is approx ~0ms, but we call other functions in that function. So, the total execution time of other functions is 4.491ms. So, it shows 4.54ms in that column which is equal to own time taken by 3 loop() function + own time of foo().
Avg: It shows the average execution time of a particular function. If you are calling a function one time only, you won’t see the differences. If you are calling more than one time, you will see the differences. The formula for calculating the average is:
Avg = Own time / Call
Min and Max columns: It shows the minimum execution time of a particular function. In our example, we call loop() for 3 times. When we passed 1000 as a parameter, it probably took only a few millisecond (let’s say 0.045ms.) and when we passed 100000 to that function, it took much longer than the first time (let’s say 4.036ms). So, in that case, 0.045ms will be shown in Min column and 4.036ms will be shown in Max column.
File: It shows the file name of file with line number where the function is located

Any comments and suggestions are welcome 🙂
~~Chandan Luthra~~
References:
Book https://www.packtpub.com/firebug-1-5-editing-debugging-and-monitoring-web-pages/book
Refcard http://refcardz.dzone.com/refcardz/getting-started-firebug-15