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

A presentation at DenverScript Meetup in November 2019 in Denver, CO, USA by Egwuenu Gift

Slide 1

Slide 1

Debugging Like a Boss A DEVELOPER’S GUIDE TO GREAT DEBUGGING EXPERIENCE GIFT EGWUENU lauragift21

Slide 2

Slide 2

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

Slide 3

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

Slide 4

Slide 4

lauragift21 Procedure for Debugging

Slide 5

Slide 5

lauragift21 Identify the bug Procedure for Debugging

Slide 6

Slide 6

lauragift21 Identify the bug Reproduce the bug Procedure for Debugging

Slide 7

Slide 7

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

Slide 8

Slide 8

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

Slide 9

Slide 9

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

Slide 10

Slide 10

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

Slide 11

Slide 11

Console.table() lauragift21

Slide 12

Slide 12

Console.time() & Console.timeEnd lauragift21

Slide 13

Slide 13

Browser Developer Tools Debugger Breakpoints Black Boxing lauragift21

Slide 14

Slide 14

Debugger lauragift21

Slide 15

Slide 15

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

Slide 16

Slide 16

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

Slide 17

Slide 17

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

Slide 18

Slide 18

Debugger for Chrome Extension with VS Code lauragift21

Slide 19

Slide 19

Chrome Developer Tools Extension with VS Code lauragift21

Slide 20

Slide 20

Chrome Developer Tools Extension with VS Code lauragift21

Slide 21

Slide 21

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

Slide 22

Slide 22

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