Debugging With JS Frameworks

on YouTube ↗39m

" summary

Demonstrates concrete fixes: uses the Replay time‑travel debugger plus Chrome/Firefox DevTools, React/Vue DevTools and Redux to reproduce and inspect bugs, not just theorize. Replays show a resize handler executed 95 hits where elementNewWidth drops to NaN because scaleX becomes negative Infinity after dividing by bounds.currentWidth = 0; adding a guard and commenting the root causes gets a fix merged the next day. Another bug shows missing panel logic when dispatching setViewMode in Redux; moving the panel decision into the action centralizes state and stops the layout break.

AI-written summary · about

" chapters (11)

1. 0:00Introduction to debugging
2. 2:05Why debugging is hard
3. 5:59Debugging a real-world bug
4. 10:38Inspecting tools for debugging
5. 14:29Evaluating tools for debugging
6. 17:39Understanding application behavior
7. 18:01Debugging frameworks like Vue
8. 24:00Debugging framework internals
9. 26:09Common JavaScript patterns
10. 31:48Debugging React and Redux
11. 37:28Why debugging matters

" related talks

• 01h 08mSquashing JavaScript BugsTodd H. Gardner · NDC Sydney 2017
• 37mTime Travel Debugging JavaScript ApplicationsCecelia Martinez · Strange Loop 2022
• 58mSquashing JavaScript bugsTodd H. Gardner · NDC London 2017
• 49mEffective Browser JavaScript DebuggingVance Lucas · Dutch PHP Conference 2017
• 33mEssential JavaScript debugging tools for the modern detectiveRebecca Hill · You Gotta Love Frontend 2019
• 29mEssential JavaScript debugging tools for the modern detectiveRebecca Hill · JSConf Budapest 2019
• 53mBeyond console.logAaron Powell · NDC Sydney 2016
• 28mEssential JS debugging tools for the modern detectiveRebecca Hill · localhost conference 2019