Hands on performance debugging with the browser in devtools

on YouTube ↗29m

" summary

Devtools troubleshooting focuses on measurable fixes: use the Network, Performance, Memory tabs to find a 500 ms JavaScript request, 91 requests totaling 3.5 MB with 1.6 MB transferred, and 65 tiny images causing many round trips. Snapshot memory shows ~5,000 DOM nodes and duplicated documents; the flame chart pinpoints a heavy PDP function and GC pauses that block the main thread. Console helpers like console.time and console.trace locate hot paths to remove repeated load handlers and reduce repaints.

AI-written summary · about

" chapters (8)

1. 0:00Start
2. 1:45Web Performance
3. 2:18Network
4. 9:45Performance Tab
5. 16:09The Load Dom Event
6. 18:05Flame Chart
7. 18:46Performance Inspector
8. 19:56Memory Tab

" related talks

• 49mEffective Browser JavaScript DebuggingVance Lucas · Dutch PHP Conference 2017
• 40mWhy Debugging Web Performance with Chrome DevTools Is Easier Than You Think!Jack Franklin · Pixel Pioneers 2025
• 47mDebugging, Profiling, & Rocking Out with Browser-Based Developer Tools!Mike Herchel · Frontend United 2018
• 25mDebugging, Profiling, & Rocking Out with Browser-Based Developer Tools!Mike Herchel · DevFest Florida 2019
• 28mGetting down to brass tacks: Using chrome dev tools to level up your applicationsKen Wheeler · React Miami 2023
• 54mRemoving the gag from your browserJared Wyles · Web Directions Code 2012
• 17mVisualising Front-End Performance BottlenecksRichie McColl · React Summit 2020
• 30mThe Chrome DevTools Performance PanelRick Viscomi · SquiggleConf 2024