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.

[Craigeniah]

I would prefer the ability to have the dev tools in their own window, or undocked essentially.
Example would be how the browser dev tools does this. Screenshot from Chrome/Brave Browser DevTools.

[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

[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.

[goper-leo]

Is there a keyboard shortcut for the "select component in the page"? A shortcut would be very helpful. Thanks.

[Violet-VE]

Would like to add multi-language support, e.g. Chinese

[alexzhang1030]

PR Welcome!

[RSS1102]

PR Welcome!

good! If I have a chance I will try i18n work.

[zcrumbo]

My team is already really missing the ability to filter state in vuex/pinia

[webfansplz]

we’ll support it.

[renarsb]

bringing back highlighting components in the view when you select them would be nice

[alexzhang1030]

We have this on component panel

[renarsb]

it was more when you select/hover the node in the root tree it would highlight it in the view (if i have many components or if its not my project it is hards to navigate and understand which component is where).

[alexzhang1030]

You can use this as a temporary solution, as this might cause performance impacts, we will consider adding an option to support it.

[Craigeniah]

Moving this to it's own thread from my original comment at the top as it's slightly different from what was being suggested in that thread.
#111 (reply in thread)

[Craigeniah]

Apologies, I guess I'm referring to the vite plugin. Normally I would just use it in the browser extension, and I was using it as the vite plugin and it would not allow me to undock it, just move it around the page.

[alexzhang1030]

You can try the separate window, I think that will perfectly solve your problem.

[Craigeniah]

You can try the separate window, I think that will perfectly solve your problem.

Thanks for the info, can you elaborate on that a bit more however, where do I find that option?
I feel like I'm misunderstanding something.

[alexzhang1030]

Sorry for delay, you can try this(you need open your page first)

[Craigeniah]

Thanks @alexzhang1030 I'll try that, appreciate the assist here!

[puyt]

In the previous version, you could toggle highlights on DOM elements as they (re)rendered, which was quite useful for debugging.

This feature allowed you to see if a certain reactivity was updating more than one element, such as a list of items that should only update a single item when something changes, rather than all the items.

I can't seem to find this toggle in the new devtools. Is it still available, or is it something that's planned for future updates?

[alexzhang1030]

Planned, maybe soon!

[puyt]

@alexzhang1030 is this still planned?

[alexzhang1030]

Hey, I’ve been quite busy with work lately, so I don’t have much time to tackle this right now. 😅 PRs are welcome, or I’ll get to it when I have some free time. Thanks for your patience! 🙌

[alexzhang1030]

#827

[puyt]

No problem, I totally understand. I just wanted to check if this is still somewhere on the roadmap, as this previously existing feature would have been useful for a current use case I have.

Thanks for the update! 🙂

[fmgrafikdesign]

Please consider removing the "Welcome to the new version..." screen soon. When using incognito mode, the screen gets shown everytime on new browser contexts, which adds up to a lot of unnecessary extra clicks needed to actually use the tool.

[RSS1102]

Maybe should add a "skip all beginner guides"

[Martijn91]

Could we re-enable travelling the component tree with the use of arrow buttons again? This was very usefull with navigating through some nested components :)

[BenEdelstain]

Is it possible to track all api calls by components (for example on page load) / sort by same call path etc ?

[varHarrie]

https://github.com/varHarrie/vite-plugin-vue-inspector-plus

I make an extension for vue devtools, which can quickly view the component hierarchy relationship of the target element and quickly open the component code file through combo key and mouse click. This is very helpful for development and I hope it can be integrated into the official function.

[alexzhang1030]

varHarrie/vite-plugin-vue-inspector-plus

I make an extension for vue devtools, which can quickly view the component hierarchy relationship of the target element and quickly open the component code file through combo key and mouse click. This is very helpful for development and I hope it can be integrated into the official function.

Hi, do you have any interest in making a PR?

[varHarrie]

I'll review it when I have some free time, maybe submitting it to vite-plugin-vue-inspector would be better.

[malditochecho]

In the components tab, I would like to be able to navigate through the components with up/down keyboard arrows, and expand/collapse the tree of components with the left/right arrow keys.

Maybe also every time that a route is visited, automatically expand the tree up to the route's component, so its already selected and ready to be explored on the right panel.

Thanks!

[PeterCerven]

Not sure if this is an inspector issues or Vue Devtools issue but is there a way to trigger inspector while dialog window is open?

[kimhornung]

I always go directly to "Components" after clicking the Vue tab in Dev Tools. For me, it would save a click if there was a setting to specify what the initial screen should be (instead of always opening with the overview, even when the overview has been disabled in Settings).

[LTDakin]

Came here to comment the same thing, the info page is fine, but even when I toggle it off It still shows up when I open the dev tools! And then I have to click components. Would be a great UX improvement