Debugging Like a Pro: A Deep Dive into Chrome DevTools

A talk presented at Google I/O 2023 by GDG Tamale. In this talk, I present alternative efficient techniques for debugging with Google Chrome. This presentation was accompanied by a code demo

Transcript

1. Debugging Like a Pro: A Deep Dive into Chrome DevTools Baako Alhassan Mohammed
2. Outline Avoiding Bugs Chrome DevTools Features for Faster Debugging - Event Listener Breakpoints - Code Breakpoints - Replay XHR - Inspecting Network Activity Bonus tips
3. Avoiding Bugs
4. Avoiding Bugs ❏ Consistent naming of identifiers ❏ int minimumAllowableWithdrawalAmount; ✅ ❏ int minimumAllowableDepositAmount; ✅ ❏ int maximumTransfer; ❌ int maximumTransferAmount ; ✅ ❏ Stick to one spelling convention ❏ camelCase or snake_case but not both ❏ Harness your IDE, library, framework and/or language tools ❏ Syntax highlighting ❏ Code completion (IntelliSense) ❏ Hover docs ❏ Breakpoints
5. Chrome DevTools Features for Faster Debugging 01 Demo: Event Listener and Code Breakpoints 02 Demo: Network Tab, Edit and Replay XHR Request
6. Bonus Tips 01 Laugh 😂: Scroll social media, watch cat videos, browse programmer memes, etc. 02 Sleep 😴: Take a nap to clear your brain’s cache and cookies. 03 Reach out 🫂: A problem shared is a problem halved.
7. Thank you 󰚣 Connect with me: linkedin.com/in/baakomohammed twitter.com.com/hassan_codes github.com/hassan-codes fb.com/baako.a.mohammed