{"id":1509,"date":"2010-08-16T09:01:17","date_gmt":"2010-08-16T03:31:17","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=1509"},"modified":"2017-04-24T15:50:24","modified_gmt":"2017-04-24T10:20:24","slug":"javascript-profiling-through-firebugs-console-api","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/javascript-profiling-through-firebugs-console-api\/","title":{"rendered":"JavaScript Profiling through Firebug&#8217;s Console API."},"content":{"rendered":"<p>Sometimes we want to know which line of codes or <a title=\"Javascript Development\" href=\"http:\/\/www.tothenew.com\/front-end-angularjs-development\">methods in the JavaScript<\/a> is taking time which slows up the page load. Many times our browser gets hanged due to the execution of JavaScript.<\/p>\n<p>Firebug allows us to profile the JavaScript. Following are the two methods that are used for profiling JavaScript:<br \/>\n<strong>console.profile()<br \/>\nconsole.profileEnd()<\/strong><\/p>\n<p>After the execution of the JS, Firebug generates a nice stats through which one can figure out the problematic line of code(if any).<\/p>\n<p>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):<\/p>\n<pre lang=\"html\"><script>\/\/ <![CDATA[\r\nfunction bar(){\r\n\tconsole.profile('Measuring time');\r\n\tfoo();\r\n\tconsole.profileEnd();\r\n}\r\nfunction foo(){\r\n\tloop(1000);loop(100000);loop(10000);\r\n}\r\nfunction loop(count){\r\n\tfor(var i=0;i<count;i++){}\r\n}\r\n\/\/ ]]><\/script>Click this button to profile JavaScript <input type=\"button\" value=\"Start\" \/><\/pre>\n<p>Click on the button to start the JavaScript profiler. You would see the table is generated in the Firebug\u2019s Console panel.<br \/>\n<img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-1514\" title=\"Firebug's Console API\" src=\"\/blog\/wp-ttn-blog\/uploads\/2010\/08\/Screenshot.png\" alt=\"JS profiling\" width=\"700\" height=\"78\" \/><br \/>\nDescription and purpose of the columns:<br \/>\n<strong>Function: <\/strong>This column shows the name of each function.<br \/>\n<strong>Call:<\/strong> It shows the count of how many a particular function has been invoked. (3 times for loop() function in our case.)<br \/>\n<strong>Percent: <\/strong>It shows the time consuming of each function in percentage.<br \/>\n<strong>Own Time:<\/strong> 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.<br \/>\n<strong>Time: <\/strong>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().<br \/>\n<strong>Avg:<\/strong> It shows the average execution time of a particular function. If you are calling a function one time only, you won\u2019t see the differences. If you are calling more than one time, you will see the differences. The formula for calculating the average is:<br \/>\nAvg = Own time \/ Call<br \/>\n<strong>Min and Max columns: <\/strong>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\u2019s say 0.045ms.) and when we passed 100000 to that function, it took much longer than the first time (let\u2019s say 4.036ms). So, in that case, 0.045ms will be shown in Min column and 4.036ms will be shown in Max column.<br \/>\n<strong>File: <\/strong>It shows the file name of file with line number where the function is located<\/p>\n<p>Any comments and suggestions are welcome \ud83d\ude42<br \/>\n~~Chandan Luthra~~<br \/>\nReferences:<br \/>\nBook https:\/\/www.packtpub.com\/firebug-1-5-editing-debugging-and-monitoring-web-pages\/book<br \/>\nRefcard http:\/\/refcardz.dzone.com\/refcardz\/getting-started-firebug-15<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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() [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":3},"categories":[1],"tags":[4860],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/1509"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=1509"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/1509\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=1509"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=1509"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=1509"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}