console.md

Console

Chrome Console Documentation

Return any of the last five selected DOM elements in the Elements tab

console selectors

$0 // Last element selected 
$1 // Second to last element selected
$2 // Third to last element selected
$3 // Fourth to last element selected
$4 // Fifth to last element selected

Return the value of the last evaluated expression

console selectors

1 + 1;
// Returns 2
$_ // Currently contains: 2

Return the first matched element on the page

console selectors

$('p') // Equivalent to document.querySelector('p') or document.getElementsByTagName('p')[0]

Return an array of all matched elements on the page

console selectors

$$('p') // Equivalent to document.querySelectorAll('p') or document.getElementsByTagName('p')
$$('p')[2] // Selects the third paragraph tag on the page

Log the value of a variable to the console

console.log()

var num = 2;
console.log("The value of num is", num);
// Logs to the console: The value of num is 2

Style a log message

console.log()

console.log('%cBlue! %cRed!', 'color: blue;', 'color: red;');
// Logs to the console:

Log the properties of an object to the console

console.dir()

var str = new String("hello");
console.dir(str); // dir() is an alias that works as well
// Logs to the console:

Display the contents of an array (must contain multiple arrays or objects) in a table

console.table()

var people = [
  ["John", "Smith"], 
  ["Jane", "Doe"], 
  ["Emily", "Jones"]
];
console.table(people);
// Logs to the console:

var people = [
  { name: "John Smith", age: 25 },
  { name: "Jane Doe", age: 66 },
  { name: "Emily Jones", age: 14 }
];
console.table(people);
// Logs to the console:

var people = [
  { name: "John Smith", age: 25, weight: 160 },
  { name: "Jane Doe", age: 66, weight: 110 },
  { name: "Emily Jones", age: 14, weight: 105 }
];
console.table(people, ["name", "weight"]); // If restricting to only one specific column, a string with the property name instead of the array works
// Logs to the console:

Group log messages

console.group()

console.group("URL Details");
console.log("Scheme: HTTPS")
console.log("Host: example.com");
console.groupEnd();
// Logs to the console:

// Collapse the group by default
console.groupCollapsed("URL Details");
console.log("Scheme: HTTPS")
console.log("Host: example.com");
console.groupEnd();
// Logs to the console:

console.group("URL Details");   
console.log("Scheme: HTTPS")
console.log("Host: example.com");

// Nested group
console.group("Query String Parameters");
console.log("foo: bar")
console.log("value: 42");
console.groupEnd();

console.groupEnd();
// Logs to the console:

Clear the console

console.clear()

console.clear();
// Alternatively, the alias clear() or the keyboard shortcut Cmd-K will clear the console also

Set a counter

console.count()

console.count("page load");
// Logs to the console:

Copy a string representaton of the specified object

copy()

copy($0);

Open the elements tab and select the element/function specified

inspect()

inspect($0); // Displays the selected element in the elements tab
inspect(runCar); // Opens the Sources panel when the function is called

Set a breakpoint to break when the specified function is called

debug()

debug(runCar);

Log a default message when the specified function is called and which arguments are passed into it

monitor()

function accelerateCar(speed, distance) { 
  // Do something here 
}
monitor(accelerateCar);
accelerateCar(160, 200);
// Displays to the console: function accelerateCar called with arguments: 160, 200

Set a breakpoint at a specified position in the code process

debugger

debugger; // Add to the code where the breakpoint should occur

Live Edit anything on a page

contentEditable

document.body.contentEditable = true;
// After this is set, anything on the page can be edited until the page is reloaded

Extract information from a page

var urls = $$('a'); 
urls.forEach(function(url){
  console.log(url.href);
});
// Consoles out all the link locations on the page

Show all events tied to a specified element

getEventListeners()

getEventListeners($0); // Show all the event listeners available to the last selected element in the elements tab

Log a default message when the specified events are performed on an element

monitorEvents()

monitorEvents(window, ["resize", "click"]); // If restricting to only one specific event, a string with the event name instead of the array works