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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

- 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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Procedure for Debugging lauragift21

Slide 5

Slide 5 text

Procedure for Debugging Identify the bug lauragift21

Slide 6

Slide 6 text

Procedure for Debugging Identify the bug Reproduce the bug lauragift21

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

lauragift21 Console.table()

Slide 12

Slide 12 text

lauragift21 Console.time() & Console.timeEnd

Slide 13

Slide 13 text

Browser Developer Tools lauragift21 Debugger Black Boxing Breakpoints

Slide 14

Slide 14 text

lauragift21 Debugger

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

lauragift21 Debugger for Chrome Extension with VS Code

Slide 19

Slide 19 text

lauragift21 Chrome Developer Tools Extension with VS Code

Slide 20

Slide 20 text

lauragift21 Chrome Developer Tools Extension with VS Code

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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