COOL TOOLZ
chrome devtools are a thing
© oh-fourteen, NATIONAL BASKETBALL ASSOCIATION
we write javascript about pizza
hot tip #1:
you have to open devtools if you want to use them
reference the DOM in the console
-
$0 -> last inspected element
-
$_ -> last console result
console.log() is the coolest thing you can do with the console.
oh man, i'm here to tell you guys that is NOT. TRUE.
there are LOADS of console and cli methods
-
console.dir() on an object or DOM node
- console.trace()
-
console.group() & console.groupEnd()
say you wanted to copy some unwieldly huge object to your text editor for some reason.
SAY IT.
pretty great that copy() is a thing
hot tip #3: console debugging is for chumps
step debugging
watch, scope, call stack
- great for loops, so you don't have to hit "play" a thousand times
- only breaks when the expression evaluates to true, but the expression evaluates on every iteration
- that means you can get creative and spell HACKS with a "Z"
HACKZZZZ!
enable experiments
chrome://flags -> "Enable Developer Tools experiments"
- frameworks debugging support
- step-in candidates
keep your debugging environment clean
- incognito mode
- disable cache
- disable extensions
- dedicated browser for development
better resources than this presentation?
of course there are, i only talked about two of the tabs