Logging OpenLayers with Firebug

imageI take it as given that anyone developing with Firefox and OpenLayers has Firebug installed. Firebug has a number of powerful tools that can make the previous nightmare of JavaScript debugging tolerable.

One feature I recently “discovered” are the logging options. It’s definitely a timesaver over my previous method of putting temporary alert(vals); throughout my code. As well as debugging the logging is very useful for automatically documenting formulae in JavaScript with worked examples that can then be pasted straight into the documentation.

An example of the logging capabilities can be seen on my sample OpenLayers page. If you already have Firebug installed you should be able to see the output similar to that below when the page loads.



The full range of options for logging can be seen in the Firebug Console API wiki page. The sample page has a few different logging options briefly explained below.

To list all properties and functions for the layer object simply add:


To list only an objects properties (without all its associated functions), use a construct similar to:

//an alternative to just list properties
var prop;
for (prop in layer) {
    if (typeof layer[prop] !== 'function') {
        console.log('%s : %s', prop, layer[prop]); //log values to Firebug

This example below prints details about the map object. Handily Firebug adds a hyperlink in the output to the line where console.info is called. String substitutions can be used (e.g. replace %s with a string, or %i with an integer) for easier formatting.

// write out some info
console.info("The map projection is %s and has %i layers", map.projection, map.layers.length);
console.info('Layer Name: \'%s\'', layer.name);

Assertions can be placed in code as follows:

// make an assertion
console.assert(map.layers.length === 1);

I was taught to use the assert statement as often as possible in code. Its amazing (and disconcerting) how many times “impossible” situations can occur. Whilst assertions are normally removed from production code for desktop applications, a JavaScript error message may prove invaluable when trying to debug a user’s problem remotely. As with everything in programming its a personal choice whether or not to use assertions – some people clearly assertions are evil.

The console API also supports timers, and writing out the call stack at points in your application for when things start getting more complicated.


  • This function makes sure that no JavaScript errors are thrown for browsers without Firebug installed. It is included in the sample.
  • Sometimes you may have to restart your browser, or make sure there is only one instance of Firefox is running for the logging messages to appear.
  • Internet Explorer 8 has similar development tools that can be downloaded from the Microsoft site. It appears to support similar logging functions as Firebug, but I’ve not gone into these in any depth.

2 views shared on this article. Join in...

  1. geographika says:

    I’ve since realised that the Firebug code is actually included in OpenLayers see – http://openlayers.org/dev/examples/debug.html

  2. geographika says:

    The OpenLayers blog also suggests a cross-browser alternative to FireBug – http://openlayers.org/blog/2008/02/22/debugging-openlayers

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these tags : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>