Squashing JavaScript Bugs

on YouTube ↗01h 08m

" summary

A buggy demo app called getRanter gets debugged live using Chrome DevTools and shows concrete fixes: add event.preventDefault to stop form submits, bind or arrow functions to fix lost this in setTimeout, and change conditional checks so the draft saved in localStorage key "nextRant" can be an empty string. Monitoring via TrackJS surfaces 237 API 400s. A memory leak caused 100KB allocations every 10s; clearing render state with children.length = 0 drops retained growth to ~10KB.

AI-written summary · about

" chapters (14)

1. 0:00Start
2. 5:07Impersonate Real Users
3. 7:55Elements Panel
4. 8:40Event Listener Tab
5. 10:55Event Delegation Pattern
6. 16:33Async Stack Traces
7. 18:31Breakpoints
8. 20:38Dot Bind on Functions
9. 21:40Fat Arrow Function
10. 25:14Element Inspector
11. 27:24Local Storage
12. 33:05The Worst Place To Catch a Bug
13. 44:18Record Allocation Timeline
14. 1:00:45Memory Bug

" related talks

• 58mSquashing JavaScript bugsTodd H. Gardner · NDC London 2017
• 39mDebugging With JS FrameworksCecelia Martinez · Connect.Tech 2022
• 01h 04mJavaScript's Most WantedTodd H. Gardner · NDC Sydney 2016
• 31mMemory Leaks in JavaScriptDaniel Danielecki · jsday 2025
• 20mMemory Leaks and the Havoc They WreakWill Klein · CascadiaJS 2020
• 37mReact Tune UpYoav Niran · React Live 2019
• 26mOptimize Your JavaScript App's PerformanceYonatan Kra · ConfrontJS 2022
• 41mBrowser Internals for JS DevsAlexander Blom · Web Unleashed 2016