We’ve all spent time solving problems that have been addressed in new releases of languages or tools. I just found the following and am surprised by the toolset available for troubleshooting in Chrome. If you find yourself troubleshooting Javascript, take a look at Tips and Tricks for Chrome Devtools before solving a problem that no longer exists. The following examples are taken from the Google Devtools page.

Grouping Console Log Items

Console will nest a series of responses that are preceded by console.group() and terminated by console.groupEnd();

Example:

console.group("Authentication phase");
console.log("Authenticating user '%s'", user);
// authentication code here...
if (!authenticated) {
    console.log("User '%s' not authenticated.", user)
}
console.groupEnd();

Table Formatting for Objects and Arrays

Console can output objects and arrays as a table with the headers the property names or array index.

console.table([{a:1, b:2, c:3}, {a:"foo", b:false, c:undefined}]);

Dir displays non-enumerable and hierarchical information. Exceptionally helpful for checking html elements.

console.dir(document.body.getElementsByTagName('a');

Track the Time it takes for a process to complete

console.time("Array initialize");
    var array= new Array(1000000);
    for (var i = array.length - 1; i >= 0; i--) {
        array[i] = new Object();
    };
console.timeEnd("Array initialize");