Chrome Devtools

I normally wouldn’t spend the time looking at this course, but I’m here to fill in gaps in my learning, so I figured why not allow some expert try and teach me a little more about the console. I mean I know EVERYTHING THERE IS TO KNOW ABOUT THE CONSOLE SO I DIDNT THINK I WOULD LEARN NOTHIN… but I did…

console logging options

console.log(“fuck”); console.warn(“fuck”); console.error(“fuck”);“fuck”); console.debug(“fuck”);

Can filter console with chrome dev tools.

console.log({foo: “fuck”, nested: {nested_value: “fuckbar”}});

console.log(“hello my name is %s. I am %d years old”, “fuck”, 50);

console.log(“here is a fucking object %o”, {fuck: “me”})

console.log(“this is my %coutput!”, “color: blue; font-size: 33px;”)

console log groups

for (var i = 0; i < 100; i++) {
  var num = Math.random() * 100;
  console.groupCollapsed("I'm a group!");
  console.log("number greater than 10?", num > 10);
  console.log("number greater than 50?", num > 50);"I'm a collapsed group!");


for (var i = 0; i < 10000; i++) { var num = Math.random() * 100

if (num > 50) {
  console.count("greater than 50");
} else {
  console.count("less than 50");




var array = [];
for(var i = 0; i < 1000000; i++) {
  array.push({index: i});



function Character(name, power) { = name; this.power = power; }

var buffy = new Character(“buffy”, “slayer”); var willow = new Character(“willow”, “witch”); var spike = new Character(“spake”, “vampire”);

var chars = [buffy, willow, spike];

var charsByName = { buffy: buffy, willow: willow, spike: spike }

console.log(chars); console.table(chars); console.table(charsByName);

console.table(charsByName, []); console.table(charsByName, [“power”]); console.table(charsByName, [“power”,“name”]);

cmd + shift + j

opens console (DUH KNEW THIS LOL)


from the elements screen opens a console window


will show the currently selected dom element


will return the first match of class kitten


will return all spans


will return first span


will select the first span

monitorEvents(document.body, “click”);

will monitor events happening on the page, can be combined with any of the other commands

Events Tab

Select an element, go to events tab, it will list all events attached to that node. Pretty slick for debugging.

DOM Breakpoints Tab

Right click on an element, Break on, subtree modified. Debugger will pop-up anytime a subtree is modified.

Subtree modified, attribute modified, node removed

These are the three DOM Breakpoint options. Very cool.


use module.exports when you export an object

use exports when you export a function


the ~ allows the patch version to be updated, so 2.2.6 would be possible, but NOT 2.3.0


the ^ allows the minor version to be updated, so 2.3.0 would be possible, but NOT 3.0.0

Post Content