Debug Like a Detective

on YouTube ↗23m

" summary

Shows concrete debugging moves: use Chrome DevTools features like conditional breakpoints and live expressions to watch an axios response and spot response.data becoming undefined at initial render then fix with a v-if guard, use console utilities API and monitorEvents to trace UI events, export HAR or copy as curl to reproduce network errors, and use git commands including git bisect and git blame to find the exact commit. Ends with tests and Datadog monitoring confirming the fix works.

AI-written summary · about

" chapters (7)

1. 0:00Debugging like a detective
2. 1:57Console errors as clues
3. 7:57Witness statements across environments
4. 9:45Narrowing suspects with DevTools
5. 18:46Git for debugging
6. 20:52Capturing the culprit with error handling
7. 22:38Summary & Q&A

" related talks

• 29mEssential JavaScript debugging tools for the modern detectiveRebecca Hill · JSConf Budapest 2019
• 33mEssential JavaScript debugging tools for the modern detectiveRebecca Hill · You Gotta Love Frontend 2019
• 47mDebugging, Profiling, & Rocking Out with Browser-Based Developer Tools!Mike Herchel · Frontend United 2018
• 35mDebugging JS and ReactMark Erikson · React Alicante 2024
• 28mEssential JS debugging tools for the modern detectiveRebecca Hill · localhost conference 2019
• 05mDebugging, a step away from the consoleAdam Weeks · dotJS 2018
• 03mEntrevistaJon Rojí · Commit Conf 2019
• 28mDebugging with DevTools: Mastering the Detective WorkArmen Vardanyan · JS Conf Armenia 2024