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”); console.info(“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);
  console.group("I'm a collapsed group!");
  console.log("fuck!");
  console.log("wtf");
  console.groupEnd();
  console.groupEnd();
}

console.count

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");
}

}

console.time

console.time("fuck");

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

console.timeEnd("fuck");

console.table

function Character(name, power) { this.name = 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)

esc

from the elements screen opens a console window

$0

will show the currently selected dom element

$(’.kitten’)

will return the first match of class kitten

$$(‘span’)

will return all spans

$('span’)

will return first span

inspect($('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.

Exports

use module.exports when you export an object

use exports when you export a function

~2.2.5

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

^2.2.5

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

Post Content