Beyond console.log

on YouTube ↗53m

" summary

Practical demo of browser devtools across Chrome, Edge and Firefox, showing concrete commands and tricks rather than theory: use console.table, console.assert, grouped logs and timers to profile AJAX calls; explain source maps and multi-level maps for webpack/JSX debugging; show conditional breakpoints as tracepoint workarounds and Edge’s native tracepoints plus an XHR breakpoint that pauses on AJAX completion; cover black boxing/JustMyCode, performance flame charts and Firefox’s scratchpad and Web Audio inspector. Live demos run and break at real lines of compiled code.

AI-written summary · about

" chapters (12)

1. 0:00Intro
2. 0:53History
3. 8:30Browser nuances
4. 14:54Console
5. 17:39Source Maps
6. 22:31Trace Points
7. 26:47Just My Code
8. 29:43Performance Tools
9. 34:26Unique Features
10. 41:51Chrome Dev Tools
11. 45:26Msh Dev Tools
12. 51:26Outro

" related talks

• 33mEssential JavaScript debugging tools for the modern detectiveRebecca Hill · You Gotta Love Frontend 2019
• 28mEssential JS debugging tools for the modern detectiveRebecca Hill · localhost conference 2019
• 29mEssential JavaScript debugging tools for the modern detectiveRebecca Hill · JSConf Budapest 2019
• 03mEntrevistaJon Rojí · Commit Conf 2019
• 50mChrome Developer Tools Deep DiveShay Friedman · Jfokus 2016
• 43mModern web debugging with devtoolsJecelyn Yeen · BrazilJS Conf 2024
• 49mEffective Browser JavaScript DebuggingVance Lucas · Dutch PHP Conference 2017
• 25mDevTools Deep DiveAlex Lakatos · JSPoland Conf 2017