Delivering Quality » Firefox Extension

Firebug: The JavaScript Debugger

Mark — Mon, 12 Oct 2009 05:08:26 +0000

JavaScript is a core language of many web developers and a necessary component for any modern web application; therefore having an excellent JavaScript debugger and knowing how to use it effectively is key to fixing bugs faster. Fixing bugs faster also makes you a happier software developer!

I recommend Firebug, which is a JavaScript debugger, a real-time HTML, CSS, DOM, and JavaScript editor, and a network monitor.

Logging

One of the most useful features are the logging functions through console.log which can simply be used to output a string or object:
console.log('Testing log output: ', myObject);
This will output your message and the full object available for inspection in the Firebug console tab. In addition to console.log, there is also console.warn, console.error, and more. See the Firebug documentation for more info.

Be careful to remove the statements from your code before deploying it, because your users won’t have Firebug installed, and JavaScript will then fail when it tries to output to the console object. Also, you certainly don’t want users to see your debug output.

console.log in action

Breakpoints

Pausing scripts to investigate the system at a current point in time can be very valuable in solving bugs. To use the breakpoint feature click just to the left of a JavaScript line. This will set a breakpoint and make a red dot appear.

You can also add a conditional breakpoint by right clicking on a line number. Now the program will only pause under your specified condition.

Setting a breakpoint

JavaScript Errors

Firebug will print out JavaScript errors with the corresponding file and line number. An absolute must for any JavaScript development.

A JavaScript Error

Those are the key feature I use most often, but there are many more JavaScript features in Firebug, including stack traces, watching expressions, profiling and viewing events.

Download Firebug now.

Browser Notifications with Yip

Mark — Mon, 10 Aug 2009 02:51:35 +0000

Ever wanted your web application to be able to show notifications even if the user may be in another browser tab or application? Now you can!

The relatively new Yip extension for Firefox adds notification functionality. This is not a small JavaScript notification that pops up in the browser tab, but one that integrates directly with the users Operating System.

Yip uses libnotify/notify-osd on Ubuntu Linux, Growl on Mac, and Snarl or Growl for Windows on Windows. If none of these notification applications are installed, it will use Firefox's simple and not as pretty notification system. Ubuntu Linux users have notify-osd installed by default, Growl is popular with Mac users, yet Windows users probably don't have Snarl or Growler for Windows installed.

When building with notifications remember that they are meant to enhance the user experience, not require it.

The Yip extension supports both the Fluid and Prism APIs, but recommends Fluid because of support for an onclick callback function.

The API is simple and straight to the point:

PLAIN TEXT

JAVASCRIPT:

window.fluid.showGrowlNotification({
title: "your notification title",
description: "some description",
onclick: optionalCallbackFunction,
icon: "URL to an icon"
});

Since Yip may not be installed on the users computer, just wrap it with a check for fluid. A complete example looks like this:

PLAIN TEXT

JAVASCRIPT:

if (typeof(fluid) !== 'undefined') {
window.fluid.showGrowlNotification({
title: "Hello World",
description: "The Google icon says Hi",
icon: "http://www.google.com/favicon.ico"
});
}

Related Projects

Roar: Embed notifications into a web page (powered by MooTools).
growl.js: Windows only notifications using Growl for Windows.
NotificationAPI: Notifications in Google Gears

Of all these options, Yip is the best solution by far; its fully cross platform, has a simple to use API, and is ready to use. Install Yip now.