Vue.js Devtools changelog
Vue.js Devtools changelog
github.com/vuejs/vue-devtools

Timeline and API

 

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 😸

Install or upgrade on Firefox

Install on Chrome


Timeline

A new 'Timeline' view is now available next to the Inspector and Settings views.

devtools-timeline.png

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

devtools-timeline-default-layers.png

Clicking on an event will make it grow and will display more information about it in the right pane:

devtools-timeline-selected-event.png

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.

devtools-timeline-scrollbar.png

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:

devtools-pick-component.png


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-dark-mode.png


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:

devtools-timeline-custom-layer.png

Component state can also be modified with the API. This example is from @kazupon and a work-in-progress version of vue-i18n:

devtools-component-state-custom.png

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:

devtools-custom-inspectors.png