Do you remember life before Firebug started the browser console revolution? I still have the nightmares. Today, we’re spoiled for choice and the development consoles are increasingly powerful.

That said, many of us still use console.log as our primary debugging command. There are several other methods you may not be aware of…


console.count displays the number of times the line was called. It can be passed an optional name parameter to identify the counter, e.g.

for (var i = 0; i < 3; i++) {
	console.count( "main doSomething loop:" );


console.count can be used in Chrome’s Developer Tools, Firebug and the IE11 F12 tools.

console.dir and console.dirxml

Outputting a DOM node using console.log is useful and will allow you to navigate to the HTML panel where you can view its position in the tree and its properties. However, you can view those details directly in the console.

console.dir(node) displays an interactive list of all object properties — like you would normally see in the DOM panel, e.g.

console.dir( document.getElementById("test") );


console.dir can be used in Chrome’s Developer Tools, Firebug, Firefox’s Web Developer console and the IE11 F12 tools.

Similarly, console.dirxml(node) displays the node and all descendants — like a section of the HTML panel, e.g.

console.dirxml( document.getElementById("test") );


console.dirxml can be used in Chrome’s Developer Tools, Firebug and the IE11 F12 tools.


console.table outputs an object or array in a tabular format which can be inspected and re-ordered by clicking the table headings, e.g.

var browsers = [
	{ name: "Internet Explorer", vendor: "Microsoft", version: "11" },
	{ name: "Chrome", vendor: "Google", version: "31" },
	{ name: "Firefox", vendor: "Mozilla", version: "26" },
	{ name: "Safari", vendor: "Apple", version: "7" },
	{ name: "Opera", vendor: "Opera", version: "18" }

console.table( browsers );


console.dirxml can be used in Chrome’s Developer Tools and Firebug. You can also specify an array as a second parameter to define different column headings.

Very useful. It’s worth browsing your favorite browser console’s documentation to find other hidden gems lurking in the tools.

Tags: browser, console, debugging, development
Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

  • Ibrahim Islam

    Awesome! This was almost “unknown” to me than “little-known”

  • Anonymous

    awesome.. been using the console awhile and wasn’t aware of any of these useful console methods!

  • moretea

    Shweet! :-)

  • Anonymous

    It was not known but now I know it, thanks for the tip and congrats on your 900th article, it’s a grate achievement.

  • OsakaWebbie

    I was even more ignorant – I have been using Firebug (rather clumsily) for years, and never knew about any console methods at all – I assumed that all you could do is add breakpoints and watch expressions and hope to get it to tell you what’s wrong. I’ll have to read up on console.log now, which apparently everyone but me already knew about… ;-)

  • YosephM

    thanks for this!

  • Rajneesh Rai

    very Informative post…. till now i only used console.log… Thanks

  • Adithya PR

    Nice, thank you for sharing.

  • Timothy Solomon

    Handy tips, thanks :)

  • Mehile Orloff

    Nice! Never knew.
    BTW, I suspect the `console.dirxml` in the compatibility section for console.table is a copy/paste artifact … just heads-up :)

Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.