JavaScript Debugging With The console Object
In the early days of JavaScript there were few options for debugging large web applications. You could have used the multiple alert notifications or possibly even calling document.write to write messages into the document. Firebug changed web developers lives, and I think how we view JavaScript, by making it incredibly easy to debug HTML, CSS, and JavaScript. Since Firebug, most current versions of web browsers include powerful debugging tools. In addition to the debugging tools browsers have made available a JavaScript console object to help write debug statements. With console, there is no need to pop up alerts to inspect the state of an object. To write a log message intended for the console, just write the following JavaScript statement in the right place.
console.log("This is a log message");
console.log("Message one", "Message two", "Message three");
To open the console, you can find it in Safari by looking for the the Web Inspector, in Chrome it’s called Developer Tools, and in Firefox you’ll find it under the Tools menu as Web Console.
The console object has a lot of useful debugging messages for errors with different severity, such as log, debug, info, warn, and error.
console.info("I'm here.");
console.warn("Do I smell smoke?");
console.error("The roof, the roof, the roof is on fire.");
In addition to logging String messages, you can log whole JavaScript objects. It may be useful to inspect a complete object and it’s state. To write out the state of an object to the console use the dir method as in the following example.
console.dir({fname:"Bill", lname:"Gates"});
console.dir(document.getElementById('SomeElementId'));
In Chrome and Safari, you can also use dirxml to display the a HTML element object in the console as HTML. In my version of Firefox, this method did not work.
console.dirxml(document.getElementById('SomeElementId'));
You can also group related log messages, no matter their severity. To group console messages surround them with a group and groupEnd. You can even nest groups inside of groups.
console.group("Server update");
console.log("calling server...");
// ... any number of console log messages.
console.groupEnd();
You can also test the performance of your JavaScript code with time and timeEnd. Both of these methods accept a String label and it needs it needs to be the same value for both methods.
console.time("Process Data");
// ... some time consuming code
console.timeEnd("Process Data");
When the timeEnd method is executed it will generate a message in the log console with the amount of time it took to run the code between the time and timeEnd method.
Chrome Developer Tools Web Console