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

[skirtles-code]

This was implemented in #427.

You can access the currently selected component via $vm in the console. You can also use $vm0, ..., $vm9 to access the last 10 components.

[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

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

[BugBust86]

开发者工具真好用

[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

[luckydonald]

Additionally, I always click the locate icon, thinking it would lead me to that component in the inspector,

but instead it opens my editor with the file of that component.

So basically, I'd rather have the following button there:

That page could then have a open in editor button.

In either way for opening the editor I'd rather use a share icon or a editor symbol 📝, not a sniper cross.

[Naedri]

Would it be possible to provide an iife version to the npm repository ?
Indeed, it may help to close the vuejs/pinia#2914 issue.

[eleztian]

Can you consider supporting MCP, so that the cursor can make development more smooth?

[slavco86]

Was about to suggest something similar. That coupled with Playwright MCP would be amazing for AI debugging

[NikhilVerma]

Yes its a pain because AI tools can't debug or inspect Vue component state

[nuno-am]

Would you consider adding a new panel to track a11y issues?

[mepeisen]

I am playing around with custom inspectors. Mainly to interact with SSE and simulating my events during development. Anyhow it would be great to manipulate the nodeActions of an inspector depending on the selected node. For example selecting node "A" would display actions "Simulate Order" and "Simulate Cancellation". Selecting node "B" would display action "Simulate filling shopping cart".

I already see that this would break up API as well as the communication layer because getInspectorState should be able to send new nodeActions if needed. What do you think about it?

[Airkro]

Please release v7 on Edge extensions store. Chrome store Blocked by GFW.

[spaansba]

Can you consider adding a panel for Tanstack Form? Would love to contribute if its something more people would find interesting.

[Caffeine19]

Add support for custom keyboard shortcuts to avoid conflicts with other apps or extensions.