Visualising program execution

on YouTube ↗34m

" summary

Claim: instrumenting JavaScript by transforming its AST makes a full execution trace cheaply available and dramatically speeds debugging; the uploader cites programmers spending about half their time on debugging. Implementation uses Esprima and Falafel to add tracking (e.g. injected window.log objects), builds visualisations like sparklines and a scrubbable timeline, and scales to real apps with snapshotting and deterministic replay in the browser. A playable game editor and a production-integrated UI at Brigade demonstrate the idea actually works.

AI-written summary · about

" chapters (12)

1. 0:00Start
2. 1:31Javascript
3. 3:05Debugging
4. 4:30Instrumentation
5. 5:52Omniscient Debugging
6. 6:09How Does Debugging Work
7. 10:33Initialize this Array of Values
8. 19:28The Execution Trace
9. 20:38Snapshotting and Deterministic Replay
10. 22:14Time-Lapse
11. 23:21Company Website
12. 26:47Recap

" related talks

• 30mVisualizing process evolutionDann Toliver · JSConf US 2015
• 53mFuture of JavaScript Debugging: Dbux and Dynamic Program AnalysisDominik Seifert · Developer Growth Summit 2022
• 47mDebugging, Profiling, & Rocking Out with Browser-Based Developer Tools!Mike Herchel · Frontend United 2018
• 21mFuture of Web ToolingNikita Vasilyev · JSConf EU 2014
• 33mEssential JavaScript debugging tools for the modern detectiveRebecca Hill · You Gotta Love Frontend 2019
• 44mJavaScript AST programming: Introduction and beyondTakuto Wada · JSConf JP 2019
• 37mTime Travel Debugging JavaScript ApplicationsCecelia Martinez · Strange Loop 2022
• 53mBeyond console.logAaron Powell · NDC Sydney 2016