Building your own DevTools Console

on YouTube ↗46m

" summary

A practical walkthrough of building a JavaScript DevTools Console as a frontend-only SPA, covering developer experience (DX) decisions, use of eval-based execution, and surprises/hardcore implementation details. The talk references ECMAScript specification aspects relevant to console features and warns against attempting to implement a full interpreter.

AI-written summary · about

" chapters (12)

1. 0:00Introduction
2. 1:03Console history
3. 3:54Eval implementation issues
4. 8:52Top-level variables problems
5. 15:24JavaScript interpreter creation
6. 20:23Side effect flag in interpreter
7. 24:56Object display and internal slots
8. 28:31Module support and cyclic dependencies
9. 34:34Summary
10. 39:20Console demo with React and TypeScript
11. 42:30Open source and future plans
12. 43:13Q&A

" related talks

• 53mBeyond console.logAaron Powell · NDC Sydney 2016
• 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
• 31mA Modern Front-End WorkflowUmar Hansa · Render Conference 2017
• 43mModern web debugging with devtoolsJecelyn Yeen · BrazilJS Conf 2024
• 37mAll tooled up and nowhere to go?Christian Heilmann · HalfStack Online May 2020