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

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

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

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

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