Future of JavaScript Debugging: Dbux and Dynamic Program Analysis

on YouTube ↗53m

" summary

Debugging consumes 30–60% of developer time, and Dbux is a VS Code extension that records runtime traces and visualizes them as a searchable call graph and dynamic slicing view. It shows per-call inputs/outputs, async call relationships, recursion trees (fibonacci demo) and a timeline-based map so backward reasoning and eliminating irrelevant code become fast. The demo works on JavaScript web examples (ToDo MVC); React Native and native Java/Kotlin are not supported out of the box.

AI-written summary · about

" chapters (15)

1. 0:00Introduction
2. 2:41Outline
3. 2:56How do we usually debug?
4. 3:36What is debugging really?
5. 4:39How do devs locate their bugs?
6. 5:47The "dark matter" of debugging
7. 6:57My opinion: We lack a "debugging culture"
8. 8:30What is a debugger?
9. 9:46What is a "good interactive debugger"?
10. 10:57How does an interactive debugger work?
11. 15:29Dynamic analysis example
12. 23:22What is dynamic analysis?
13. 39:05Interactive debugging features
14. 44:02An important survey on interactive debugging
15. 44:55Q&A

" related talks

• 33mEssential JavaScript debugging tools for the modern detectiveRebecca Hill · You Gotta Love Frontend 2019
• 34mVisualising program executionJan Paul Posma · Strange Loop 2015
• 29mEssential JavaScript debugging tools for the modern detectiveRebecca Hill · JSConf Budapest 2019
• 23mDebugging the WebKatie Walker · JSCAMP Virtual 2021
• 53mBeyond console.logAaron Powell · NDC Sydney 2016
• 28mEssential JS debugging tools for the modern detectiveRebecca Hill · localhost conference 2019
• 15mThe JavaScript Debug RobotOlivier Crameri · JSConf US 2013
• 49mEffective Browser JavaScript DebuggingVance Lucas · Dutch PHP Conference 2017