Extensible devtools
summary
A full rewrite of Vue devtools exposes a concrete plugin API that actually works: a small demo plugin uses setupDevtoolsPlugin and ships devtools-only code, adds component state and tags via the inspect hook, registers a custom inspector tree with per-node state, and creates a colored timeline layer that receives click events and grouped start/done events. Live coding shows api methods like notifyComponentUpdate addInspector addTimelineEvent and grouping produce visible, accurate inspector panels and timeline groups.
AI-written summary · about
chapters (7)
- 0:00Extensible devtools intro
- 3:57Plugin API overview
- 7:38Setting up plugin
- 16:25Enhancing components inspector
- 26:01Custom inspector creation
- 35:01Timeline layers and events
- 49:25Summary
