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.
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!
Hiding layers
A new button in the toolbar allows you to toggle layers if you want to focus on some of them.
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
Revamped Timeline Inspector
The pane was completely revamped to two different panes: a list of events and an event data inspector.
You can now list all the events in the layer with the 'All' tab in the list pane:
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:
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:
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:
Time cursor
When you move your mouse on the Timeline, the corresponding date and time is now display at the top:
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:
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.
Those screenshot can be augmented with information such as the mouse cursor position :
Or with the component emitting an event:
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:
Events can also have a log type, which can be "error" or "warning":
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:
Inspect DOM
The inspect DOM button is back and works on fragments too!
Editable state
Editing data and props is back! Also works on setup state!
Custom inspectors from devtools plugins also support editing state:
Exposing on window
Like before the rewrite, the selected component is now exposed on the page window.$vm variable:
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!