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

Basically the stable version

v6.0.0-beta.15

Update on Firefox

Many bug fixes and small improvements are included in this last beta.

New features:

  • A new "Force refresh" button in the component inspectors (you can also click on the selected component again in the tree).
  • api.on.timelineCleared

The docs were updated with a FAQ and other improvements. You can also now read the Vue Devtools Plugin development guide on the website.

Read the full changelog here


The new devtools will soon be released in the stable channel, so existing users of v5 will automatically upgrade to v6. To update your beta version, you will need to disable/uninstall it and install the stable version.

But don't worry! Links will be posted here with "Legacy" versions in case you want/need to downgrade to v5.

Iframe support for Vue 2

v6.0.0-beta.14

A small update that adds support for iframe for Vue 2 apps and fixes the component highlighter position (taking the iframe position into account).

Screenshot from 2021-06-09 13-47-53.png

Update on Firefox

Read full changelog here

Release Candidate

6.0.0-beta.13

Unless any major issue is found, this is the last beta release of the rewritten devtools!

Update on Firefox


Iframe support

An old feature request has finally landed in the devtools! You can now inspect apps that are inside iframes:

image.png


Timeline changes

Some refinement and style tweaks make the timeline easier to use. If you have trouble using the mouse wheel to navigate the timeline, new buttons next to the scrollbar allow you to zoom in and out, and to move around:

image.png

You can also use the keyboard to navigate the events list.


Read the full changelog here

Components improvements & more

6.0.0-beta.12

Many improvements and bug fixing in this new release. BTW, I just became a dad 👶

Update on Firefox


Components

New highlighter

The component highlighter in the page got a brand new design and now displays the component size:

Screenshot from 2021-05-28 01-25-31.png

The label is now positioned on top of the component so you can view it unobstructed, and it will also stick to the screen edges in case the component isn't entirely visible.

Scroll to component

You can now use this new button to scroll in the page to the selected component:

Screenshot from 2021-05-29 11-25-16.png

Keyboard navigation

It's back! Use the Up and Down arrow keys to select the components. The Right key can expand a component's children and the Left key close the children. Also works in custom inspectors!

Render code

Use this new button to display the render function code of the selected component:

Screenshot from 2021-05-28 01-23-25.png

image.png

HTML elements

In the inspector, HTML elements display was improved with the attributes:

Screenshot from 2021-05-29 06-38-47.png

You can now also send the element to the console to interact with it:

Screenshot from 2021-05-29 07-15-38.png

Screenshot from 2021-05-29 07-23-23.png


Reworked More menu

The 'more' menu got some love for this patch with some settings being reorganized and with new icons:

image.png


API Changes

Custom state actions

When sending Custom state you can add buttons next to the field to trigger some actions.

{
  _custom: {
    // ...
    actions: [
      {
        icon: 'input',
        tooltip: 'Log to console',
        action: () => console.log('current time:', time)
      }
    ]
  }
}

Actually, this is how the 'Log element info console' feature is implemented:

Screenshot from 2021-05-29 07-15-38.png

Custom inspector actions

You can now add custom buttons to the custom inspectors too!

api.addInspector({
  // ...
  actions: [
    {
      icon: 'star',
      tooltip: 'Test custom action',
      action: () => console.log('Meow! 🐱')
    }
  ]
})

image.png

selectInspectorNode

It's now possible to programmatically select a node in a custom inspector with this new method (docs):

api.selectInspectorNode('test-inspector', 'some-node-id')

Read the full changelog here

Performance monitoring

6.0.0-beta.11

You can now debug the performance of your Vue 3 application with the new performance monitoring system, that includes a flamechart! 🔥

Update on Firefox


Performance monitoring

Available in Vue 3.1 beta 4 or later

Component tree

The slow components will now have an additional tag with the slowest operation displayed:

image.png

It will turn red above 30 ms:

image.png

You can mouse over the tag to get a summary of the different operations:

image.png

Timeline flamechart

A new Performance layer is also available in the Timeline. It will display a flamechart of the performance of your components:

image.png

Selecting an operation will display useful duration info:

image.png

Disable the performance monitoring

If you want to disable the monitoring, go to the Global Settings using the "more" button on the right of the header and uncheck the new Performance monitoring option.


Improved error display

The errors displayed in the state inspector has now a "view stack trace" button:

Screenshot from 2021-05-18 23-37-00.png

You can also print the error into the browser console for better line numbers:

Screenshot from 2021-05-18 23-37-09.png

Screenshot from 2021-05-18 23-37-22.png

Errors coming from your application are now also better catched and displayed properly without breaking the devtools.


API Changes

InspectorNodeTag

New tooltip option to display a tooltip over the tag:

api.on.visitComponentTree(payload => {
  payload.treeNode.tags.push({
    label: 'test',
    textColor: 0xFFAAAA,
    backgroundColor: 0xFFEEEE,
    tooltip: `It's a tooltip here!`
  })
})
api.on.getInspectorTree(payload => {
  payload.rootNodes = [
    {
      id: 'root',
      label: `Root`,
      tags: [
        {
          label: 'juice',
          textColor: 0x000000,
          backgroundColor: 0xFF984F,
          tooltip: 'Some juicy info'
        }
      ]
    }
  ]
})

New Timeline Layer options

The addTimelineLayer method has 3 new options:

  • skipScreenshots (optional): don't trigger a screenshot for the layer events
  • groupsOnly (optional): only display groups of events (they will be drawn as rectangles)
  • ignoreNoDurationGroups (optional): skip groups with no duration (useful when groupsOnly is true)

If you want to turn your layer into a flame chart like the Performance one, put those options to true!


Read full changelog

Reworked User Experience

 

New

 

 

v6.0.0-beta.10

This release includes many user experience improvements and a ton of source-code refactoring, including the migration of the frontend to Typescript.

Update on Firefox


New header user experience

The header at the top of the devtools was reworked for easier usage: the second menu was replaced with a Inspector/Timeline switch for quicker access!

image.png

The 'Plugins' and 'Settings' items were moved to the "more" menu on the right (with the 3 vertical dots).

image.png


Selectable Timeline Layers

The Timeline experience got improved too! You can now select layer directly:

image.png

By default it will automatically switch to the 'All' tab and select the most recent event on the layer:

image.png

It will remember the last inspected event on each layer, so you can switch between layers easily. Clicking on an already selected layer will select the most recent event instead for quick access! (Double clicking works too!)


API changes

Hooks app scoping

By default, hooks are now scoped to the application associated to the devtools plugin. This means you no longer need to check the current application in the hooks.

Before:

api.on.getInspectorTree(payload => {
  if (payload.app === app && payload.inspectorId === 'test-inspector') {
    // ...
  }
})

After:

api.on.getInspectorTree(payload => {
  if (payload.inspectorId === 'test-inspector') {
    // ...
  }
})

All the documented hooks are now automatically scoped to the application as well, including on.inspectComponent and on.visitComponentTree. 🎉

To disable this automatic scoping, put disableAppScope to false in the setupDevtoolsPlugin call.

setupDevtoolsPlugin({
  // ...
  disableAppScope: true
}, api => {
  // ...
})

Editable component custom fields

You can now handle the edition of custom component fields with the on.editComponentState hook:

api.on.editComponentState(payload => {
  if (payload.type === stateType) {
    payload.set(myState)
  }
})

Read full changelog

Bug fixing & improvements

 

Fix

 

 

v6.0.0-beta.9

Update on Firefox


This release fixes many bugs and includes improvements such as disabling Timeline screenshots if it's not supported.

Read full changelog

Vue 2 support & Plugin permissions

 

New

 

 

v6.0.0-beta.7

Update on Firefox


Vue 2 support

Vue 2 is now available! It also supports vue-router and vuex. Please try it in your Vue 2 projects and send us feedback!

image.png

Plugin permissions

Plugins can now be disabled by going to their details pane and toggling the Enabled switch. It's now also possible to manage their permissions. You don't want the Router plugin to add layers to the Timeline? Deactivate the 'Timeline' permission!

image.png

Other improvements

More interface and user experience refinements made it into this release! 👌️

Component persistent inspect

Work toward this long-awaited feature is now mostly complete! Selection of a component should be fully retained (if possible) between full page refreshes!

See it in action

Copy property path

You can now copy the path of a property in the inspectors:

image.png

Custom inspector state filter

You can now filter state in inspectors other than Components. Rejoice!

Hiding option

Don't want your app or some of your components to show up in the devtools? Add the devtools.hide option in your (root) components!

export default {
  devtools: { hide: true }
}

Edit computed setters

You can now edit computed with setters. 😻️


API changes

Please update @vue/devtools-api in your library top take advantage of those changes.

Those new API methods are available:

  • getComponentInstances
  • highlightElement
  • unhighlightElement

The addInspector gained a new noSelectionText option.

Browse the API Reference here


Many more bug fixes and improvements are listed here

API improvements & Firefox Timeline Screenshots support

 

New

 

 

v6.0.0-beta.7

Update on Firefox


Plugin API

Plugins can now display a custom logo:

Screenshot from 2021-02-19 11.07.13.png

Screenshot from 2021-02-19 11-07-27.png


Other improvements were made to the API and bugs were fixed. Head over to the repo changelog:

Other changes

Data editing & Firefox fixes

 

Fix

 

 

v6.0.0-beta.6

A few bugs have been fixed in this release:

  • Data Editing wasn't working
  • Mousewheel events not working on Firefox
  • Firefox hanging up when switching devtools tab

Update on Firefox