• WORK AT FACEBOOK & BEFORE THAT WAS
FIRST ENGINEER AT CODECADEMY
• JAVASCRIPT EXPERIMENTALIST
• MADE REPL.IT, DEBUG.JS, SOUNDOFJS etc
• amasad.me, @amasad
ABOUT ME
Slide 11
Slide 11 text
• CODE THAT’S EASIER TO DEBUG
• DEBUGGING TIPS AND TRICKS
• THE TOOLS
JAVASCRIPT DEBUGGING
Slide 12
Slide 12 text
CODE EASIER TO DEBUG
Slide 13
Slide 13 text
LAMBDAS ARE FUN BUT
ARE ALSO HARD TO
DEBUG
Slide 14
Slide 14 text
CONTRIVED
EXAMPLES
AHEAD
Slide 15
Slide 15 text
CLOSURES HIDE THEIR
STATE REALLY WELL
function counter(value) {!
! return function() {!
! ! value++;!
! ! return value;!
! };!
}
class Counter {!
! constructor(val) {!
! ! this.value = val;!
! }!
! increment() {!
! ! this.value++;!
! ! return this.value;!
! }!
}
PARTIAL APPLICATIONS AND
LAZY EVALUATION ARE
EVEN HARDER TO DEBUG
function counter(value) {!
! return function() {!
! ! return value;!
! };!
}!
!
function increment(counter) {!
! return function() {!
! ! return counter() + 1;!
! };!
}!
!
var count = counter(2);!
count = increment(count);!
console.log(count());
Slide 18
Slide 18 text
MAKE CLASSES AND OBJECTS
ACCESSIBLE FROM THE
CONSOLE
Slide 19
Slide 19 text
LOOK AT APPLICATION
STATE WHILE IN IDLE
STATE
> app.counter.value!
1
Slide 20
Slide 20 text
START THINGS FROM
THE CONSOLE
> app.user.emit('change')
Slide 21
Slide 21 text
QUICKLY SET BREAKPOINTS
AND MONKEY PATCH
FROM THE CONSOLE
> debug(app.user.save);
Slide 22
Slide 22 text
DEBUGGING TIPS AND TRICKS
Slide 23
Slide 23 text
ALWAYS BE
DEBUGGING
• HAVE THE PROGRAM IN A RUNNABLE STATE
• SPLIT UP BIG CHANGES INTO SMALLER STEPS
• BREADTH FIRST > DEPTH FIRST
• KEEPS THE MOMENTUM GOING
Slide 24
Slide 24 text
CHANGE AND
BREAK THINGS
• RUNNING THE PROGRAM OFTEN ALLOWS
YOU TO TAKE BOLD STEPS
• WHILE IN THE DEBUGGER CHANGE THINGS
• LEAN ON YOUR TOOLS
Slide 25
Slide 25 text
LIVE EDIT
• FIX MISTAKES WITHOUT RELOADING
• IMPLEMENT FEATURES WITHOUT RELOADING
• ADD CONDITIONAL DEBUG STATEMENTS
Slide 26
Slide 26 text
SETTING UP TRAPS
• IN LARGE APPLICATIONS AND TEAMS IT’S
HARD TO KNOW WHAT EVERYONE IS DOING
• CAN’T STEP-DEBUG ALL THE CODE
• NEED A WAY TO BREAK ON ACTIONS
Slide 27
Slide 27 text
BREAK ON METHOD
CALLS
Event.prototype.preventDefault = function() {!
! debugger;!
! return _original.apply(this, arguments);!
}
• CAN’T SET A BREAKPOINT ON NATIVE METHODS
• NEED TO KNOW SOURCE FOR METHOD
Slide 28
Slide 28 text
BREAK ON CUSTOM
EVENTS
monitorEvents(elem);!
!
user.on('change', function() {!
debugger;!
});
• WHEN AN EVENT IS FIRED, I WANT STOP AND INSPECT
• NEED TO MAKE SURE AN EVENT IS FIRING
Slide 29
Slide 29 text
BREAK ON PROPERTY
ACCESS
• WTF CHANGES
• SETTERS AND GETTERS
counter.__defineSetter__(!
! 'value',!
! function() { debugger; }!
);
Slide 30
Slide 30 text
BREAK ON
CALLBACKS
• SIMILAR TO CUSTOM EVENTS
• TO MAKE SURE AN ASYNC PROCESS FINISHES
user.save(function() {!
! debugger;!
});
Slide 31
Slide 31 text
BREAK ON DOM
MUTATION
• CAN BE DONE FROM DEVTOOLS
• FINE GRAINED CONTROL
• ASYNC CALL STACK
Slide 32
Slide 32 text
BREAK ON OBJECT
MUTATION
• Object.observe!
• BREAK ON PROPERTY ADD, CHANGE, DELETE
• ASYNC CALL STACK (NOT WORKING YET)
Slide 33
Slide 33 text
THE TOOLS
Slide 34
Slide 34 text
THE COMMAND LINE API
$0!
$(selector)!
monitorEvents(elem)!
getEventListeners(elem)
PROBLEMS WITH
LIVE EDIT
• LIVE EDIT IN CHROME IS NOT FLEXIBLE
• CAN’T HAVE A BUILD STEP
• CAN’T HAVE A REMOTE FILE SYSTEM
• LOCKED INTO THE DEVTOOLS EDITOR
Slide 38
Slide 38 text
INTRODUCING
flo
• OPEN SOURCE TOOL BY FACEBOOK
• LIVE EDIT JAVASCRIPT, CSS, IMAGES
• SUPPORTS BUILD STEPS AND ANY DEV ENV
• EASY TO INTEGRATE AND HACKABLE
Slide 39
Slide 39 text
WHY flo
• I JOINED FACEBOOK LAST YEAR
• A LOT OF JAVASCRIPT GOODNESS
• RELOADING AND GETTING TO THE USER
FLOW TAKES A LONG TIME
• COMPLEX DEV ENVIRONMENT
Slide 40
Slide 40 text
HOW flo
• SERVER COMPONENT IS NPM MODULE
• CLIENT COMPONENT IS CHROME EXTENSION
• facebook.github.com/fb-flo