Why don’t the browser’s Dev Tools understand Your Code?
summary
Claims that browser DevTools can actually understand source-level UI now and demonstrates a prototype called Ed that instruments a running app via a local container and a JavaScript package labeled the browser API. The system parses JSX and styles, maps rendered elements back to code, supports hot module reload, visual drag‑and‑drop reorder, wiring event handlers to real functions, and can make git commits from the tool. The prototype runs, pauses, inspects state and updates code live, showing the approach works.
AI-written summary · about
chapters (11)
- 0:00Browser Dev Tools gap
- 3:29Why other tools understand code
- 7:19History of web visual tools
- 11:39Why Dev Tools lagged
- 14:30Ed project demo
- 17:06Ed synchronizes code and visuals
- 20:18Browser API for real-time updates
- 22:28Commits in Dev environment
- 24:01Visual workflow and future
- 24:44Why the web suits this
- 25:05Q&A
related talks
32mWhy don’t browser dev tools understand your code?
43mModern web debugging with devtools
50mModern Web Debugging
28mModern Web Debugging
31mDevTools Of The Future
35mOptimise your Web Development Workflow
27mChrome DevTools: State of the Union 2024 - Debugging React & Beyond
20mGoing steady with the Chrome Dev Tools