Ideas & Suggestions

[webfansplz]

Any ideas & suggestions always welcome 👇

[michealroberts]

@webfansplz Great little tool!

My one nice to have would be to have the devtools bar aligned either top, left, right or bottom. As currently it cuts over some important UI/UX.

Other than that, really cool!

[alexzhang1030]

You can move devtools by dragging the devtools widget

[michealroberts]

Did not know this, but still would be nice to have control over it’s starting position.

[Offlein]

This was incredibly confusing to me too. I made a PR to put it into the docs.

[g-zhima]

The lines in the background and the lines on the page are a bit confusing

[alexzhang1030]

You can open a PR if you have any interest :)

[DaniilIsupov]

Performance section is missing

[webfansplz]

The reason it is not supported yet is that it has performance issues, we will support it when we find a solution.

[JonathanBout]

@webfansplz I think you should enable the performance analyzer to analyze the performance analyzer's performance 😆

[michalkuncio]

I would love to see the Tanstack Query/Vue Query tab integrated inside the new Vue DevTools. I think in the "old/current" DevTools it was automatically detected and supported.

[webfansplz]

Let's track it in #150 (comment).

[ChrisExP]

Is there a way to avoid it activating a button/link when trying to access the component data of that element?

[glancel]

Is there a way to see Component Events?

[pedro-pmda]

I would like to see the events as in the Dev Tools extension. When working with third party libraries (e.g. Vuetify) it is really interesting to track them.

[dansurlaru96]

I suggest you for this beautiful DevTools Tool to add plugin and modules section like a Nuxt.JS DevTools. See idea from this image.
Thank you for support

[skuhnow]

Maybe make the Dark/Light setting ("Settings/Appearance") not "dark" by default. It took quite some time to understand where the "dark" class in my root element comes from. My suggestion: "None (or OS?), Light, Dark" with "None" as default

[webfansplz]

Let's track it in #233

[jmanchenos]

it would be nice to have a filter on Component Tab to filter props, computed, etc by a string

[webfansplz]

I'll support it.

[Dykam]

A way to (always or easily) open it in a new window.

Our scenario has us use the tool in a very constrained space (addin to an application). What works is using window.open("/__devtools__/"), but having to do this every time at the start isn't too ergonomic.

And the normal floating panel isn't very useful when using the separate devtool window, maybe automatically hiding it could be good. Though not really necessary, the setting works tool.

Stand alone with devtools.connect() would be an obvious alternative, but for some reason it frequently disconnects, which this method doesn't suffer from.

[WebMechanic]

You could put that command into a bookmarklet so it's just a click.
Create a new bookmark, add this as its URL: javascript:void( window.open("/__devtools__/") )

[SimonEast]

Sometimes I would like to interact with a component in the developer console, calling methods and updating properties. It would be great if clicking on a component in the "Components" tab would store a reference to the component instance in a global variable like $v or something like that. This is similar to how Chrome stores a DOM element reference in $0 when clicking on an HTML element in the "Elements" pane.

(I guess it would be great to allow console commands directly within the Vue Devtools pane itself, especially useful on mobile devices without a console, but I can also see that getting quite complex if you wanted autocomplete etc., so the request above is a lot simpler to implement.)

[alexzhang1030]

A small codemod tool for easy migration to new features.

Although the syntax of Vue3 hasn’t undergone significant changes, there are still some functional improvements (such as new features) between minor versions. We can write a simple codemod tool to help users easily migrate their syntax.

For example, Vue3.4 introduced a new feature short-name v-bind, and stabilized defineModel. By using devtools-codemod they can seamlessly migrate to new syntaxes without manually updating any code.

At the same time, this tool will also evolve with the iterations of Vue, presenting the new features of the latest Vue version to users in a more intuitive way.

[thedamon]

Would be really nice if there was a way to enable it to run in 'prod'/'build' mode. This may be very challenging or a non-starter because of the dependency on vite dev server, but with the old/current vue devtools browser plugin you can make it run on prod with some console commands and this can be extremely valuable

[stevecyj]

Is it possible to display the relative path of the file when hovering on open in editor?

[ghufrannoor2]

Could we display the current value of the router history?

It would be useful for debugging when dealing with issues where modifying the history doesn't work as expected, such as when implementing back/forward behavior.

[alexzhang1030]

Could we display the current value of the router history?

It would be useful for debugging when dealing with issues where modifying the history doesn't work as expected, such as when implementing back/forward behavior.

Probably we can implement this feature on vue-router

[mohamad68]

plz add open in editor button

[alexzhang1030]

We do have it on vite-plugin because this feature relies on vite middleware

[webfansplz]

We'll follow the implementation of the old devtools to support it.

[avxkim]

@webfansplz can we expect this feature in this month?

[erk-dnr]

It would be nice to be able to see a visualization of component re-renders just like the React Devtools does that

[rs3d]

We're using multiple vue apps on a "static" CMS page:

It would be great to have a combined and searchable overview for apps and components, so you can find a specific one more easily.
Especially island architectures like Astro Islands would benefit from this change (https://docs.astro.build/en/concepts/islands/)

Maybe the component view could have <App/Root>-entries, if the website uses multiple ones.

[JonathanBout]

It'd be nice for the (already very cool!) graph to follow more references than just JS, for example the import statement in less. Currently separate less files just 'float around' even though they are attached via an import statement.

[niksy]

Option to disable animation when inspecting components on the page with "Select component on the page" button.

It can be very distracting jumping between large number of components on the small area.

Maybe take into account reduced motion preference and also have a toggle to force this option (similar to dark/light mode toggle in settings).

I suppose this is related to vite-plugin-vue-inspector so it’s best to start there with setting which can be toggled via devtools?

[zhangenming]

Visual vue responsive dependency graph

[rbgmulmb]

I am using JS map in Pinia storage. Currently serialization of Map doesn't work properly, it returns an empty object. It would be nice to add support for Map and Set.
For this, special JSON replacers for Map and Set can be added.