Console commands

console.log('Hello World!');
//Hello World! 

console.log('This is a string', { foo: 'bar' }, { bar: 'foo' });
//This is a string Object {foo: "bar"} Object {bar: "foo"} 

var number = 11 * 9;
var color = 'red';
console.log('%d %s balloons', number, color);
//99 red balloons

console.log('%cThis text is styled!', 'color: #86CC00; background-color: blue; font-size: 20px; padding: 3px;');
//This text is styled! (styled output)

var count = 5;
console.assert(count > 10, 'count is not larger than 10');
//Assertion failed: count is not larger than 10

console.clear();

function clickHandler() {
    console.count('Click handler called');
    ...
}

console.dir(document.body);
//displays the DOM representation of the element rather than the XML representation displayed when using console.log()

console.dirxml(document.body);
//displays the XML representation of the element

console.error('Page not found (404)');
//Page not found (404)

console.group('Fetching Data');
console.log('Request Sent');
console.log('Data Received');
console.groupEnd();
//>Fetching Data
//  Request Sent
//  Data Received 

console.groupCollapsed('Fetching Data');
console.log('Request Sent');
console.log('Data Received');
console.groupEnd();
//>Fetching Data

console.info('Hello world');
//Hello world

function animationUI() {
    console.profile('Animating');

    // Animate something...

    console.profileEnd();
}
//will start a new JavaScript CPU profile if the developer tools are open

var data = [
    {first_name: 'Matt', last_name: 'West', occupation: 'Programmer'},
    {first_name: 'Vince', last_name: 'Vaughn', occupation: 'Actor'},
    {first_name: 'Larry', last_name: 'Page', occupation: 'CEO'}  
];
console.table(data);
//outputs structured data as an interactive table

console.time('Draw frame');
// Execute some code...
console.timeEnd('Draw frame');
//gives you a way of timing how long it takes for a piece of code to execute

console.timeline('Google Search');
// Do some work.
console.timelineEnd('Google Search');
//allows you to make a new timeline recording in the Chrome developer tools

console.timeStamp();
console.timeStamp("label")
//manually add events to the timeline

console.trace();
//stack trace

console.warn(‘This is a warning.’);
//This is a warning.