Firebug Surprise

February 6th, 2008 by Daniel | Posted in CSS/HTML, JavaScript | 10 Comments

imageI have been an advocate of Firebug for a long time now, it’s the only reason why I still use Firefox! I’ve mainly been using it for CSS/HTML - it’s inline editing is a dream. However lately I have found myself doing a whole bunch of JavaScript, and Firebug still keeps surprising me. I must admit, I never read the instruction manuals, so this one was a bit of a surprise when I found it, the profiler.

Your web app is almost perfect. You’ve got all the bugs worked out, the artwork has been dropped in, and the users are loving it. Only one problem - some of your features are a little bit sluggish and you’re not sure why.

With Firebug, you’ll never again wonder why your code is slow. Using the Firebug profiler, you can separate the tortoises from the hares within seconds.

To use the profiler, just go to the Console tab and click the "Profile" button. Then use your app for a bit or reload the page and then click the "Profile" button again. You’ll then see a detailed report that shows what functions were called and how much time each one took.

Basically it lets you find out what the hell is causing your JavaScript to run slowly. Thank you Firebug!

Digg This Stumble
Rytmis

Just one problem though: you don’t get a call graph, so there’s no easy way to tell why fooMunge() is being called fourty thousand times. Course you *can* find it out by starting from the function that takes the longest time (likely to be your entry point to the slow operation) and working down from there. But a call graph would be a lot easier to read.

February 7th, 2008 at 8:37 am
Eric Wendelin

Profiling and performance gets even better with the YSlow extension. I highly recommend it.

February 8th, 2008 at 4:41 pm
ms

screenshot would be nice.

February 9th, 2008 at 2:47 am
Mathieu Carrier

Firebug is really a great tool. I mean, how many times did I hope for breakpoints when debugging Javascript code only to find out that Firebug had them all along under the “Scripts” button. Oh well, Venkman has them too but it isn’t as nicely integrated as Firebug! :)

Cheers to the Firebug — Joe — team!

February 9th, 2008 at 3:51 am
Daniel

Hi Guys,

Thanks for the comments!

@Rytmis - I don’t think a graph would be more accurate. A table shows you an easy comparison between lots of different variables. While a graph is easier to read but lacks in the detail. Although a graph would look nice in Firebug!

@Eric - I have tried the YSlow Extension but I don’t really find it useful. It just rates things A-F and gives you no numerical representation of the results it finds.

@ms - There are loads of screenshots on the Firebug website, but I will add on on here.

@Mathieu - Venkman is horrible, I’m so glad Firebug came about to replace it. Have you ever noticed that Venkam runs the profiler on all the FireFox extension scripts as well?

Daniel

February 9th, 2008 at 11:18 am
martin

I think you misunderstood his usage of the term ‘graph’.

He doesnt mean a pretty chart, he means a stack trace so you can see who called who.

February 9th, 2008 at 12:28 pm
Eric Wendelin

YSlow actually has better than basic profiling. I can also tell you the average load time of things and of course how many files a user’s browser would grab. There are some other modes you might consider checking out.

February 9th, 2008 at 5:31 pm
Eric Wendelin

Addendum to that last comment:

YSlow also fixes a bug in Firebug that causes Firebug to think a resource was not cached when it in fact was retrieved from the cache.

February 9th, 2008 at 5:35 pm
Daniel

Hi Eric,

Sorry you are right Rytmis does mean a stack trace. It would definitely help if the profiler had a stack trace, especially when you are using a framework like Prototype. I constantly use Prototype and how to compare whats faster, my functions or Prototype’s.

Daniel

February 9th, 2008 at 9:49 pm
Casey Wise

Nice article, thank you for writing this. I had no idea you could profile your scripts! I made the transition from 1.0 to 2.0 (if there is such a thing) in the past 18 months and my coding life couldn’t be the way it is without FireBug. It’s memory leaks and sluggishness tick me off, but it’s worth it! Between jQuery and FireBug my code looks completely different from even a year ago an today. Thanks Joe for the great extension, it’s on every FireFox installation an all of my computers.

February 12th, 2008 at 1:20 pm

Leave A Comment

Blurb

Hi I'm Daniel and I'm a front-end web developer. These are my thoughts, interests and ideas. Hope you enjoy! Dont forget to subscribe to the feed.

Scrapbook

http://www.dtsn.co.uk/2008/08/28/themattinatorcom-scrapbook/