Squashing JavaScript bugs

on YouTube ↗58m

" summary

Five real bugs are reproduced and fixed using Chrome DevTools: DOM inspector to trace event listeners, Sources debugger with breakpoints and the async stack checkbox to step through handlers, workspace live edits to patch code, and Application panel to inspect localStorage. Fixes include calling event.preventDefault() to stop form submits, using Function.prototype.bind to preserve this, client-side validation to stop 400 POSTs, and Timeline/Profiles to find an ad-driven memory leak that grows ~82.9K per interval.

AI-written summary · about

" chapters (15)

1. 0:00Start
2. 0:21Smashing Javascript Bugs
3. 6:24Dom Explorer
4. 7:27Event Listeners
5. 10:06Call Stack
6. 11:59Debugging
7. 20:47The Rant Text
8. 21:52Application Capability
9. 30:45Network Inspector
10. 31:01Network Tab
11. 36:38Find a Memory Leak
12. 37:18Profiles Tab
13. 44:37Creation of Nodes
14. 56:00Dom Inspector
15. 56:22Application Explorer

" related talks

• 01h 08mSquashing JavaScript BugsTodd H. Gardner · NDC Sydney 2017
• 47mDebugging, Profiling, & Rocking Out with Browser-Based Developer Tools!Mike Herchel · Frontend United 2018
• 49mEffective Browser JavaScript DebuggingVance Lucas · Dutch PHP Conference 2017
• 01h 04mJavaScript's Most WantedTodd H. Gardner · NDC Sydney 2016
• 39mDebugging With JS FrameworksCecelia Martinez · Connect.Tech 2022
• 28mGetting down to brass tacks: Using chrome dev tools to level up your applicationsKen Wheeler · React Miami 2023
• 29mEssential JavaScript debugging tools for the modern detectiveRebecca Hill · JSConf Budapest 2019
• 25mDebugging, Profiling, & Rocking Out with Browser-Based Developer Tools!Mike Herchel · DevFest Florida 2019