Chrome developers tool

Console

 Messages

console.log('message');
console.warn('message');
console.error('message');

Grouping

console.group("Booting");
console.log("Authenticating user '%s'", user);
console.groupEnd();

Data formatting

console.table([[1,2,3], [2,3,4]]);

Only show certain fields

var book = {}; book.title = "Harry Potter"; book.author = "J K Rowling"; book.price = 9.99; book.pub_date = '2016-01-01';

console.table(book, ["title", "author"]);

Style formatting

console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");

How long does it take?

console.time("Booting");
// Do stuff
console.timeEnd("Booting");

General

  • CMD+P (or Ctrl+P) in devtools to search for any file

Get all variables / objects from browser

To see variables

keys(window) 

To see objects

dir(window)