JavaScript Debugging

Transcript

1. 1.

   JAVASCRIPT DEBUGGING AMJAD MASAD ! facebook

2. 2.

   HOW FAR HAVE WE COME

3. 3.

   None
4. 4.

   IMMEDIATE

5. 5.

   <script>! ! document.write('Hello World’);! ! </script>

6. 6.

   SRSLY?

7. 7.

   LOOK CLOSER

8. 8.

   WTF

9. 9.

   WE’VE COME A LONG WAY

10. 10.

    • WORK AT FACEBOOK & BEFORE THAT WAS FIRST ENGINEER

    AT CODECADEMY • JAVASCRIPT EXPERIMENTALIST • MADE REPL.IT, DEBUG.JS, SOUNDOFJS etc • amasad.me, @amasad ABOUT ME
11. 11.

    • CODE THAT’S EASIER TO DEBUG • DEBUGGING TIPS AND

    TRICKS • THE TOOLS JAVASCRIPT DEBUGGING
12. 12.

    CODE EASIER TO DEBUG

13. 13.

    LAMBDAS ARE FUN BUT ARE ALSO HARD TO DEBUG

14. 14.

    CONTRIVED EXAMPLES AHEAD

15. 15.

    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;! ! }! }
16. 16.

    CAN’T MONKEY PATCH CLOSURES counter.increment = function() {! ! this.value--;!

    ! return this.value;! }
17. 17.

    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());
18. 18.

    MAKE CLASSES AND OBJECTS ACCESSIBLE FROM THE CONSOLE

19. 19.

    LOOK AT APPLICATION STATE WHILE IN IDLE STATE > app.counter.value!

    1
20. 20.

    START THINGS FROM THE CONSOLE > app.user.emit('change')

21. 21.

    QUICKLY SET BREAKPOINTS AND MONKEY PATCH FROM THE CONSOLE >

    debug(app.user.save);
22. 22.

    DEBUGGING TIPS AND TRICKS

23. 23.

    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
24. 24.

    CHANGE AND BREAK THINGS • RUNNING THE PROGRAM OFTEN ALLOWS

    YOU TO TAKE BOLD STEPS • WHILE IN THE DEBUGGER CHANGE THINGS • LEAN ON YOUR TOOLS
25. 25.

    LIVE EDIT • FIX MISTAKES WITHOUT RELOADING • IMPLEMENT FEATURES

    WITHOUT RELOADING • ADD CONDITIONAL DEBUG STATEMENTS
26. 26.

    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
27. 27.

    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
28. 28.

    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
29. 29.

    BREAK ON PROPERTY ACCESS • WTF CHANGES • SETTERS AND

    GETTERS counter.__defineSetter__(! ! 'value',! ! function() { debugger; }! );
30. 30.

    BREAK ON CALLBACKS • SIMILAR TO CUSTOM EVENTS • TO

    MAKE SURE AN ASYNC PROCESS FINISHES user.save(function() {! ! debugger;! });
31. 31.

    BREAK ON DOM MUTATION • CAN BE DONE FROM DEVTOOLS

    • FINE GRAINED CONTROL • ASYNC CALL STACK
32. 32.

    BREAK ON OBJECT MUTATION • Object.observe! • BREAK ON PROPERTY

    ADD, CHANGE, DELETE • ASYNC CALL STACK (NOT WORKING YET)
33. 33.

    THE TOOLS

34. 34.

    THE COMMAND LINE API $0! $(selector)! monitorEvents(elem)! getEventListeners(elem)

35. 35.

    UNDOCUMENTED APIS debug(fn);! montior(fn);

36. 36.

    DEBUG UTILS $duv(object, event);! $dug(object, property);! $dus(object, property);! $dum(object, method);!

    ! and others… github.com/amasad/debug_utils
37. 37.

    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
38. 38.

    INTRODUCING flo • OPEN SOURCE TOOL BY FACEBOOK • LIVE

    EDIT JAVASCRIPT, CSS, IMAGES • SUPPORTS BUILD STEPS AND ANY DEV ENV • EASY TO INTEGRATE AND HACKABLE
39. 39.

    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
40. 40.

    HOW flo • SERVER COMPONENT IS NPM MODULE • CLIENT

    COMPONENT IS CHROME EXTENSION • facebook.github.com/fb-flo
41. 41.

    THANK YOU