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

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

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

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

lauragift21 Procedure for Debugging

lauragift21 Identify the bug Procedure for Debugging

lauragift21 Identify the bug Reproduce the bug Procedure for Debugging

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

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

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

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

Console.table() lauragift21

Console.time() & Console.timeEnd lauragift21

Browser Developer Tools Debugger Breakpoints Black Boxing lauragift21

Debugger lauragift21

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

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

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

Debugger for Chrome Extension with VS Code lauragift21

Chrome Developer Tools Extension with VS Code lauragift21

Chrome Developer Tools Extension with VS Code lauragift21

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

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

Egwuenu Gift
@lauragift21

1 / 22

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.