debugging Javascript

without console.log (!!!)

by Sher Minn Chong / @piratefsh at talk.js

Sher Minn


front-end web engineer

Recurse Center alum


quick survey

who this is for

beginner/intermediate programmers

Chrome/Firefox devtools

front-end only, sorry!

regular debugging

what it might look like

demo code here


  • beginner friendly
  • straightforward

pain points

  • back and forth from editor to browser
  • leaves console.log everywhere
  • have to format output

better debugging

what it looks like

so cool omg


  1. reproduce the problem
  2. find line(s) where problem occured
  3. set breakpoints where interesting things happen
  4. run code again
  5. when it hits breakpoints, step through code
  6. step into functions if necessary
  7. look at relevant variables
  8. use command line to verify
  9. identify the root problem

adapted from Advanced JavaScript debugging.

no more pain points

  • no need to switch windows
  • no need to log
  • keeps code clean
  • can debug without access to source code


A List Apart's debugging challenge
Advanced JavaScript debugging


tweet at me

psst. we're hiring.

console.log() tips


console.log('coconuts:', numCoconuts, 'onions:', numOnions);
//=> coconuts: 123 onions: 45


function Person(firstName, lastName) {
	this.firstName = firstName;
	this.lastName = lastName;

var john = new Person("John", "Smith");
var jane = new Person("Jane", "Doe");
var emily = new Person("Emily", "Jones");

console.table([john, jane, emily]);

other goodness: MDN examples