regular debugging

what it might look like

pros

• 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

workflow

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

resources

end!

tweet at me
@piratefsh

console.log() tips

arguments

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

console.table

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