New
v.6.0.0-beta.2
Welcome to the second beta release of the rewritten Vue Devtools! As it's packed with news features, we hope it was worth the wait 😸
Timeline
A new 'Timeline' view is now available next to the Inspector and Settings views.
The Timeline display information in chronological order so you can get a sense of what is going on in your app and when.
Events
Events are displayed in the center view (aka the Timeline) and are organized in layers. Each layer represents a different kind of event.
Currently, there are 3 built-in layers:
- Mouse
- Keyboard with the key being pressed
- Vue component events
Clicking on an event will make it grow and will display more information about it in the right pane:
Note that events can be stacked together in this pane to help prevent clutter in the Timline itself.
Navigating the Timeline
Above the Timeline is a "resizable" scrollbar allowing you to move the view around. The middle part behaves like a regular scrollbar, but the left and right sides (with a color accent) can be used to resize the scrollbar, effectively zoom in or out.
You can also use Ctrl (or Cmd) with your mouse wheel to zoom in or out, and Shift with your mouse wheel to scroll horizontally.
Pick component
This essential feature of the Component Inspector is back! Use the cross icon button and then click on a component on the page to select it:
Dark mode
The 'Theme' setting is back! You can now select between Light, Dark and High contrast themes or let the devtools choose depending on the browser's settings.
Devtools API
Anything on the webpage being inspected can now interact with the devtools in entirely new ways! The new devtools API allows Vue plugins to integrate with the devtools and improve your debugging experience. This is big change in architecture: the devtools team doesn't have to implement and maintain code to support packages such as vue-router, vuex or vue-fire anymore, and any community package can now integrate with the Vue devtools!
Note that the API is currently undocumented and being tested internally.
Here is an example on the Timeline with the gray layer and events being pushed in real-time from a plugin from the page:
Component state can also be modified with the API. This example is from @kazupon and a work-in-progress version of vue-i18n:
Custom inspectors
Thanks to the API, your app's plugins can also display information in a more organized way. For example, vue-router will be able to display routes information (instead of hardcoding this in the devtools itself).
Here is an example inspector created with the API:
