OKC.js

Javascript Debugging Techniques

Created by Josh Bavari / @jbavari

Make use of the 'debugger' keyword

  • Use for race conditions
  • For loop iterations
  • Callbacks
  • Event listers

Log all things!

  • console.error
  • console.warn
  • console.time('name') - console.timeEnd()
  • console.table
  • console.trace
  • console.profile('name') - console.profileEnd()
  • Log DOM - console.log(DOMElement)

Break on DOM Changes

  • Right click DOM element -> Break on..

Connected Devices


Android - about:inspect

iOS - Safari Web Inspector


  • Breakpoints / interaction with Javascript
  • Full DOM Inspection

Even More Remote

  • Weinre - include script on page
  • Launch site with script tag
  • Live inspect remote user session

Node.js

  • Node-inspector
  • Simple command - `node-debug path/to/script.js`
  • Full Chrome DevTools - breakpoints/repl

References