Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

21c519517dbb5876f15c89ae433d97f3?s=128

Egwuenu Gift

November 18, 2019
Tweet

Transcript

  1. Debugging Like a Boss A DEVELOPER' S GUI DE TO

    GREAT DEBUGGI NG EXPERIENCE GI FT EGWUENU lauragift21
  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
  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
  4. Procedure for Debugging lauragift21

  5. Procedure for Debugging Identify the bug lauragift21

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

  7. Procedure for Debugging Identify the bug Reproduce the bug Find

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

    Possible Fix Test and Document your solution. lauragift21
  9. Console Statements Step Up Your Debugging Skills lauragift21 Browser Developer

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

  11. lauragift21 Console.table()

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

  13. Browser Developer Tools lauragift21 Debugger Black Boxing Breakpoints

  14. lauragift21 Debugger

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

    debugger execution Breakpoints
  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
  17. IDE lauragift21 Debugger for Chrome Extension VS Code, Web Storm,

    Atom Debug your JavaScript code running in Google Chrome from VS Code.
  18. lauragift21 Debugger for Chrome Extension with VS Code

  19. lauragift21 Chrome Developer Tools Extension with VS Code

  20. lauragift21 Chrome Developer Tools Extension with VS Code

  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
  22. Thank You! Slides: bit.ly/debugging-talk lauragift21