Devtool Kit
Guillaume Chau
@Akryum
Vue.js Core Team
Nuxt Devtools
Vue Devtools Next
Amazing
???
Devtool Kit
The Goals
Have a common foundation
Devtools compatibility with each other
Make it easy to build devtools
Others?...
SDK to create devtools
Framework agnostic
Multi-environments
WORK IN PROGRESS
Devtools = many situations and environments
Applets
4 types of applet modules
Main: register page, tabs, views
Page: access user apps in the page
View: inside the UI (usually in tabs)
Server: mocked in production
What you are about to see is prototype code - everything can change
Main Module
Register Page Modules
Register Tabs
Register Commands
Can be in any environment
Page Module
Same context of the user app
Interact with user app
Inspect app data or the DOM
Can also register tabs...
View Module
Inside a Devtool Tab
Display a UI to the user
Server Module
Server data (for ex. nitro routes)
Node.js environment
Can be mocked in production
Managed Communication
Any module can communicate with any other
Bi-directional
Fully Typed
Remote Procedure Call
Communication channels
Direct
Post Message
Websockets
Vite HMR (Websockets)
Applet APIs
Remote Procedure Call
Tabs View: Iframe, Commands, Terminal, Inspector
Commands & Actions (& Prompts)
Devtools = Applets
Mix & Match!
What's next?
Finnish first draft of the SDK
Rebase Nuxt and Vue devtools
Iterate until it's purrrrfect
Get a unified and awesome DX
Thank you!
Devtools Kit
By Guillaume Chau
