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

Merry Christmas! 🎄️

 

New

 

 

v.6.0.0-beta.3

Happy holidays! Welcome to another update about the new Vue Devtools! Headline: a lot of new features and refinement has gone into the Timeline.

Install or upgrade on Firefox

Install on Chrome


Timeline

Too many layers

You got way too many layers on your Timeline? This update is for you!

Scrolling

You can now scroll through the layers if you have plenty of them!

Screenshot from 2020-12-23 22-59-58.png


Hiding layers

A new button in the toolbar allows you to toggle layers if you want to focus on some of them.

Screenshot from 2020-12-23 23.02.34.png


Visual improvements

  • A new color background is drawn when hovering a layer
  • Bigger dots now means that multiple events were grouped together
  • Selecting an event only draws its border

Screenshot from 2020-12-23 23-04-23.png


Revamped Timeline Inspector

The pane was completely revamped to two different panes: a list of events and an event data inspector.

Screenshot from 2020-12-23 23-07-12.png

You can now list all the events in the layer with the 'All' tab in the list pane:

Screenshot from 2020-12-23 23.09.27.png

The lists include a search field to find that event you are looking for!

Event groups

Devtools plugins can now group events together to create groups:

Screenshot from 2020-12-23 23-12-00.png

Grouping events can be useful to represent a process that is represented by multiple events, for example several Vuex mutations inside a single action.

The groups can cause other events or groups to stack on top of each other:

Screenshot from 2020-12-23 23.13.57.png

Time grid

To get a sense of how much time is passing, you can enable a grid that will draw vertical lines at regular interval of time:

Screenshot from 2020-12-23 23.15.33.png

Time cursor

When you move your mouse on the Timeline, the corresponding date and time is now display at the top:

Screenshot from 2020-12-23 23.15.49.png

Augmented screenshots

The timeline is now able to take screenshots of your application when new events are added so you can have a preview of what was the state of your application back in time ! To enable or disable it, toggle the option in the top-right menu:

Screenshot from 2020-12-23 23.17.57.png

Now, when you move you mouse through the timeline, a screenshot of your application will be shown on the web page if there is any.

gifout.gif

Those screenshot can be augmented with information such as the mouse cursor position :

Screenshot from 2020-12-23 23.33.20.png

Or with the component emitting an event:

Screenshot from 2020-12-23 23.34.50.png

Vue Devtools plugins can also render more information on those screenshots!

Improved API

More information can be described on the timeline events. For example, the built-in "Component events" layer now customize a title and a subtitle for each event:

Screenshot from 2020-12-23 23-36-48.png

Events can also have a log type, which can be "error" or "warning":

Screenshot from 2020-12-23 23-43-40.png

This allows events push by plugins to quickly surface errors to the user!


Components

Custom tags

Devtools plugins can now add custom tags to the components tree:

Screenshot from 2020-12-23 23.47.35.png

Inspect DOM

The inspect DOM button is back and works on fragments too!

Screenshot from 2020-12-23 23.48.56.png

Editable state

Editing data and props is back! Also works on setup state!

Screenshot from 2020-12-23 23.50.44.png

Custom inspectors from devtools plugins also support editing state:

Screenshot from 2020-12-23 23.52.01.png

Exposing on window

Like before the rewrite, the selected component is now exposed on the page window.$vm variable:

Screenshot from 2020-12-23 23-54-12.png


Other stuff

  • The devtools will now try to inspect the previously selected component automatically (yay)
  • It will also remember on which tab you were in (even if you close the devtools)
  • A new "Menu Step Scrolling" will make scrolling on tab menus easier for trackpads (looking at you Macbook)
  • The Vue logo now links to the changelog and the other buttons like "Report bug" have been moved to the top-right menu
  • The resizable panes will remember their size for next time! (YAY)
  • A lot of fixes and polish were applied!