Building Live HTML and Omniscient Debuggers in Brackets

on YouTube ↗29m

" summary

Live HTML shows a working pipeline that maps editor tags to DOM nodes and applies incremental DOM updates by assigning persistent IDs via CodeMirror marks, computing subtree signatures with murmurhash and emitting move/text/attribute edits; performance bottlenecks come from CodeMirror mark position lookup and are fixed by caching, landing in Brackets Sprint 31. Theseus is an omniscient debugger that injects instrumentation (via Falafel/fondue), threads async client+Node calls, and scales enough to debug Brackets itself.

AI-written summary · about

" chapters (4)

1. 0:00Start
2. 14:56PERFORMANCE
3. 15:34THE BOTTLENECK
4. 22:01FONDUE INSTRUMENTATION FUNCTION ENTRY/EXIT

" related talks

• 47mDebugging, Profiling, & Rocking Out with Browser-Based Developer Tools!Mike Herchel · Frontend United 2018
• 37mWeb Application Architecture -- Lessons Learned from BracketsBrian Rinaldi · HTML5.tx Texas 2013
• 25mTomorrow’s JavaScript debuggerAmit Zur · JS Kongress 2017
• 50mModern Web DebuggingJecelyn Yeen · SmashingConf Freiburg 2023
• 21mFuture of Web ToolingNikita Vasilyev · JSConf EU 2014
• 33mEssential JavaScript debugging tools for the modern detectiveRebecca Hill · You Gotta Love Frontend 2019
• 29mEssential JavaScript debugging tools for the modern detectiveRebecca Hill · JSConf Budapest 2019
• 35mJavaScript/Web tooling now and tomorrowChristian Heilmann · JSWorld Conference 2021