Why don’t browser dev tools understand your code?
summary
Demo shows a working code‑aware dev tool for React that reads JSX and styles, instruments the app with an Envoy sidecar, parses components into an editable model via a Scribe, and exposes a visual tree in Mighty M studio. Dragging elements reorders JSX, style edits update source files and trigger hot reload, and changes can be committed back to git. Works with Next and Vite, handles props mapping, and performs targeted, surgical code edits rather than dumping generated code.
AI-written summary · about
chapters (17)
- 0:00intro
- 0:22preamble
- 0:38overview
- 1:24visual studio / windows apps
- 1:40interface builder / ios apps
- 2:00unity / games
- 4:40web app development
- 5:46why don't browser dev tools understand your code?
- 5:58we tried that
- 8:41we had that
- 10:32now we can
- 10:53visual part of the code
- 12:25"scene file" of the web
- 14:49code-aware dev tool
- 15:16demo
- 29:57visual dev workflow
- 30:26recap
related talks
37mWhy don’t the browser’s Dev Tools understand Your Code?
30mDesigning with React
27mChrome DevTools: State of the Union 2024 - Debugging React & Beyond
22mTweak your page in real time, without leaving the comfort of your editor
21mIntroducing React View: A Set of Tools that Closes the Gap between Users, Developers
35mDebugging JS and React
38mReact as a Developer Health Tool
28mModern Web Debugging