Debugging Like a Boss: A Developer's Guide to Great Debugging Experience

Every developer has, at one point or another, battled a bug. The good ’ol console.log works! But sometimes we neglect other awesome ways to debug our apps. In this session, we’ll be shedding light on myriad better debugging tips, focused on JavaScript tech stacks.

Transcript

1. Debugging Like a
   Boss
   A DEVELOPER' S GUI DE TO GREAT DEBUGGI NG EXPERIENCE
   GI FT EGWUENU
   lauragift21
   

   View Slide

2. - Likely a fairy tale
   Imagine a world exists where
   your code works without
   errors and there's never
   anything as a bug
   lauragift21
   - Real life scenario
   We encounter bugs and errors
   daily as developers, how we
   fix these problems matters
   

   View Slide

3. Isn’t every developer go to method
   for debugging console.log() ?
   It'll be great to discover other ways of debugging with JavaScript
   lauragift21
   

   View Slide

4. Procedure for
   Debugging
   lauragift21
   

   View Slide

5. Procedure for
   Debugging
   Identify the bug
   lauragift21
   

   View Slide

6. Procedure for
   Debugging
   Identify the bug
   Reproduce the bug
   lauragift21
   

   View Slide

7. Procedure for
   Debugging
   Identify the bug
   Reproduce the bug
   Find Possible Fix
   lauragift21
   

   View Slide

8. Procedure for
   Debugging
   Identify the bug
   Reproduce the bug
   Find Possible Fix
   Test and Document
   your solution.
   lauragift21
   

   View Slide

9. Console Statements
   Step Up
   Your
   Debugging
   Skills
   lauragift21
   Browser Developer Tools
   IDE
   

   View Slide

10. Console
    Statements
    lauragift21
    Console.table()
    Console.time() &
    Console.timeEnd()
    

    View Slide

11. lauragift21
    Console.table()
    

    View Slide

12. lauragift21
    Console.time() &
    Console.timeEnd
    

    View Slide

13. Browser
    Developer
    Tools
    lauragift21
    Debugger
    Black Boxing
    Breakpoints
    

    View Slide

14. lauragift21
    Debugger
    

    View Slide

15. A breakpoint is set wherever you
    want to pause a debugger
    execution
    Breakpoints
    

    View Slide

16. Blackboxing gives you a first-class way to
    denote library (or other abstraction) code so
    that the debugger can route around it
    A cool way to ignore library
    internals when debugging
    Black Boxing
    

    View Slide

17. IDE
    lauragift21
    Debugger for Chrome Extension
    VS Code, Web Storm,
    Atom
    Debug your JavaScript code running in Google Chrome from VS Code.
    

    View Slide

18. lauragift21
    Debugger for Chrome Extension with VS Code
    

    View Slide

19. lauragift21
    Chrome Developer Tools Extension with VS Code
    

    View Slide

20. lauragift21
    Chrome Developer Tools Extension with VS Code
    

    View Slide

21. OVERVIEW OF DEBUGGING
    DEBUGGING PROCEDURES
    METHODS FOR DEBUGGING
    Talk through what debugging is all about and explain the process of
    debugging
    IDENTITY THE BUG
    REPRODUCE THE BUG
    FIX THE BUG
    TEST AND DOCUMEMNT THE FIX
    CONSOLE STATEMENTS
    DEVELOPER TOOLS
    IDE
    Round Up
    lauragift21
    

    View Slide

22. Thank You!
    Slides: bit.ly/debugging-talk
    lauragift21
    

    View Slide