O'Reilly logo

JavaScript Cookbook by Shelley Powers

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

10.8. Firefox and the Console

Problem

You want to profile a JavaScript application’s performance in Firefox.

Solution

Use Firebug and the Console commands to profile the JavaScript application.

Discussion

The Firebug Console object, its associated panel, and its API, are handy not only for JavaScript profiling, but for program logging, performing a trace, and other debugging.

Examining watch expressions in Firebug after the breakpoint is reached

Figure 10-10. Examining watch expressions in Firebug after the breakpoint is reached

When the Console panel is enabled in Firebug, there’s a drop-down menu at the top of the panel that controls what shows up in the Console, such as CSS and XML errors, whether to turn on strict warnings, or to open a larger command line. The command line is a small line at the bottom of the Console panel, as shown in Figure 10-11.

The Console command line is a way to enter Console commands (naturally). The command line isn’t for the inexperienced, but it can be a quick way to work your way around the DOM. It also has an “autofill” capability: if you start to type in a DOM element, as shown in Figure 10-12, and hit the tab, you can cycle through options at any point, hitting the return when you find one you want.

Returning to the solution, to profile JavaScript, you’ll use the Console object API, not the Command Line API. The Console object API is actually controlled in your JavaScript, with commands given directly in the script. For instance, to start a JavaScript profile and give it a name of test, use the following:

console.profile('test');

When you want to finish the profile, use:

console.profileEnd();
The Firebug Console, including command line

Figure 10-11. The Firebug Console, including command line

Using the Firebug Console command line

Figure 10-12. Using the Firebug Console command line

In the profile tab for the Console panel, you can see the named profiles, and if you click on each, see where time was spent in the application, as shown in Figure 10-13.

Using the Console object’s profile methods to profile the JavaScript

Figure 10-13. Using the Console object’s profile methods to profile the JavaScript

There are other Console object API methods, including console.log to log messages, console.count, which prints out the number of times the line with this command is executed, console.time and console.timeEnd, to set up a timer to test execution time for a block of code, and so on.

Best of all, as we’ll see later, other browser debuggers have also implemented at least partial support for the Console API.

Note

As with all debugging aids built into an application, make sure you remove console inline code commands before rolling your application out for beta or release.

See Also

The Console command line documentation can be found at http://getfirebug.com/cl.html, and the command line API at http://getfirebug.com/wiki/index.php/Command_Line. The console object API documentation can be found at http://getfirebug.com/wiki/index.php/Console.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required