JavaScript Debugging

JavaScript Debugging

03637ef1a5121222c8db0ed48c34e124?s=128

Amjad Masad

May 05, 2014
Tweet

Transcript

  1. 3.
  2. 6.
  3. 8.

    WTF

  4. 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
  5. 11.

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

    TRICKS • THE TOOLS JAVASCRIPT DEBUGGING
  6. 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;! ! }! }
  7. 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());
  8. 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
  9. 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
  10. 25.

    LIVE EDIT • FIX MISTAKES WITHOUT RELOADING • IMPLEMENT FEATURES

    WITHOUT RELOADING • ADD CONDITIONAL DEBUG STATEMENTS
  11. 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
  12. 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
  13. 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
  14. 29.

    BREAK ON PROPERTY ACCESS • WTF CHANGES • SETTERS AND

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

    BREAK ON CALLBACKS • SIMILAR TO CUSTOM EVENTS • TO

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

    BREAK ON DOM MUTATION • CAN BE DONE FROM DEVTOOLS

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

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

    ADD, CHANGE, DELETE • ASYNC CALL STACK (NOT WORKING YET)
  18. 33.
  19. 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
  20. 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
  21. 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
  22. 40.

    HOW flo • SERVER COMPONENT IS NPM MODULE • CLIENT

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