Logging Information to the Firebug JavaScript Console

By  on  

Firebug is the ultimate Web Developer debugging tool. Firebug gives you control over the page's XHTML, JavaScript, CSS, AJAX requests, and more. It's important not to simply take in what Firebug tells you though -- you can log information to your Firebug console from within your page's JavaScript. Here are a few of the helpful methods you can use:

console.log()

console.log('Application is starting.');

The console.log() method logs a message to the console without providing a line number. Simple but useful.

console.debug()

console.debug('Gets to this point without error.');

The console.debug() method logs a message to Firebug console just like log(), but debug() provides a line number reference.

console.info()

console.info('DOM is ready, now executing Moo event.');

The console.info() method logs a message to the Firebug console with a blue "information" icon. Line number reference is included.

console.warn()

console.warn('Form field [title] has no value.');

console.warn() sets a warning within the console. The warning provides a yellow background color to easily spot warnings within the console.

console.error()

console.error('The [title] element is undefined.  Bad news.');

The console.error() method places a custom error message within the console with a pink background. Easy to spot.

Each of the above methods accept an "object", or array of objects, and works much like a print-f.

With Objects

console.log("The %d item has a value of: %d", fifth, myvalue);

This probably looks familiar to a PHP programmer.

Make the most of your Firebug -- send your own message to the console!

Recent Features

  • By
    5 More HTML5 APIs You Didn’t Know Existed

    The HTML5 revolution has provided us some awesome JavaScript and HTML APIs.  Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers.  Regardless of API strength or purpose, anything to help us better do our job is a...

  • By
    An Interview with Eric Meyer

    Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it? At first blush, it was the simplicity of it as compared to the table-and-spacer...

Incredible Demos

  • By
    :valid, :invalid, and :required CSS Pseudo Classes

    Let's be honest, form validation with JavaScript can be a real bitch.  On a real basic level, however, it's not that bad.  HTML5 has jumped in to some extent, providing a few attributes to allow us to mark fields as required or only valid if matching...

  • By
    MooTools, mediaboxAdvanced, and Mexico

    The lightbox is probably one of my favorite parts of the Web 2.0 revolution. No more having to open new windows (which can bog down your computer quite a bit) to see a larger image, video, etc. Instead, the item loads right into the...

Discussion

  1. Sean O

    Using Firebug’s console() can be quite helpful. Just remember to remove calls to it before going to production as, surprisingly, IE will kick out JS errors aplenty. Or remember to use firebugx.js.

  2. Braxo

    When removing the console calls I do a simple find and replace of console. with //console.

    Plus, I know console.log can be used the same way in Safari’s developer window.

  3. Thanks for the tips! I know that you can mess with Firebug a little with this:

    http://davidwalsh.name/how-to-sniff-firebug-disable

  4. Thanks for posting. I only knew of console.log until now.

  5. anurag phadke

    Is there a way to output the “Net” log to a file on my local machine? i.e. I want to output to a file all the URLs of images/swfs/text etc. that get loaded when a page is requested by the user.

  6. @anurag: Good question — I couldn’t find anything.

  7. David

    Ensuring that your console.xxx() calls don’t throw errors when the code runs outside of a Firebug environment was always a concern of mine. The four options for handling it that I have seen are:

    Remove the console.xxx() calls before publishing, as noted by the first two commenters above.

    if (!window.console){ window.console.log = function {}; }
    if (!window.console){ window.console.log = function { // real implementation here }; }
    window.console && console.log('My message to the console.');
    

    Lately, I confess I’ve been doing a combination of (1) and (4). (1) keeps the code as lean as possible, but (4) allows me to miss a few without risking an error.

    [ BTW: Dave, I’m new to your blog, but just can’t say enough positive about it. The content, the look, the style. Just right freaking on. You might even have me sold on MooTools, as well. My investment in jQuery on a few projects is probably just at the level where I could conceivably back out and go with MooTools. But that’s a whole different discussion for another time. Anyway, thanks and kudos on the site. ]

  8. David, just like the david before me (wow, this is getting confusing), your blog is awesome! It has taught me alot about mootools and javascript in general. Anyways, i decided to stop being a nub and use firefox’s console to log things and i came across your blog. I liked it so much I wrote an entry combining a couple of your entries onto my blog. Keep up the good work!

  9. Hi,

    If you had a flattr button i flattred you !

    Thanks

  10. Slavka

    There are problems with console logging in different browsers.
    Firefox has graete firebug.
    http://getfirebug.com/wiki/index.php/Console_API
    But firebug has a lot of functions towork withs CSS. Unuse in Js debagging.
    More than oher browsers support firebug.js in different ways.

    I wrote short script for basic console.API. It redefine most of console.xxx methods to put logs(warnings,timers,info, group) to
    This console work on IE6+, FF, Chrome, Safari, Opera.
    Press ‘~’ to show/hide them
    http://dez.in.ua/console/light.html
    http://dez.in.ua/console/

    Console supply
    console.log(message);
    console.info(message);
    console.warn(message);
    console.debug(message);
    console.error(message);
    console.group(marker);
    console.group();
    console.groupCollapsed();
    console.groupCollapsed(marker);
    console.groupEnd(marker);
    console.groupEnd();
    console.time(marker);
    console.timeEnd(marker);
    console.clear();
    in all – IE6+, Chrome, Safari, Opera, FF( still work with FireBug, but done all console. requests).

  11. Taija Thomas

    This may be a silly question but I am liberal arts major and am beginning my venture into the wonderful world of computer science. Where exactly is the logs going inside of the computer’s console. I know that it may not be important to coding but will definitely help me to conceptualize what is going on inside the computer as I write my code.

    Similarly, I am compiling a collection of blog posts (www.vaughnruns.com) to help the novice programmer how is beginning with node.js. Do you know of any good books or websites that provide a thorough understanding of the material?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!