COOL TOOLZ – chrome devtools are a thing



COOL TOOLZ – chrome devtools are a thing

0 0


cool-toolz

Slides from my short Chrome DevTools talk

On Github turboclaw / cool-toolz

COOL TOOLZ

chrome devtools are a thing

© oh-fourteen, NATIONAL BASKETBALL ASSOCIATION

DAN NIXON

we write javascript about pizza

hot tip #1:

you have to open devtools if you want to use them

INSPECTED

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

other breakpoints

  • xhr
  • DOM

sources

  • fuzzy open
  • pretty print

CONDITIONAL

BREAKPOINTS

  • 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

https://github.com/turboclaw/cool-toolz