Channels ▼
RSS

Tools

AJAX Debugging with Firebug


Profiling

Finding and squashing bugs is only half the battle; the other half is identifying and killing performance bottlenecks. Firebug gives you two ways to measure the performance of your scripts and separate the tortoises from the hares.

Traditionally, the most low-tech way to measure performance is to record the time before and after a suspect code block and then log the delta. Firebug gives you a pair of functions, time and timeEnd, which do this:


 console.time("loading");
 loadWidgets();
 console.timeEnd("loading");

This technique works well if you already have an idea where your bottlenecks are, but what if you don't? Firebug includes a JavaScript profiler that gives you detailed reports on the performance of every function called during a given period.

There are two ways to start the profiler. The most direct is to click the Profile button in the toolbar of the Firebug Console tab. While this button is toggled, the profiler is working in the background, recording data about each function call. When you're ready to see a report, click the Profile button again, and you see a report that lists every function that was called, how many times it was called, and different statistics about the aggregate time spent in the function.

The other way to start the profiler is from code. The console object has two functions, profile and profileEnd, which let you create profile reports in between specific blocks of code in your scripts:


 console.profile();
 loadWidgets();
 console.profileEnd
    ("Loading widgets");

Conclusion

In short, FireBug lets you explore the far corners of the DOM. All the tools you need to poke, prod, and monitor your JavaScript, CSS, HTML and Ajax are brought together into one seamless experience, including a debugger, error console, command line, and a variety of fun inspectors.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video