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
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++) {
doSomething(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
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.
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 created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.