Let's track the UI package refactor plan here.

general

• preset based, like rem preset or pixel preset, related #62

components improvements

• Select supports multi-select and option slot, related #60

In some edge cases (need reproduction), it doesn't work. /cc @alexzhang1030

Port from Nuxt DevTools directly:

Be related to: https://github.com/webfansplz/vue-devtools-next/blob/9575408cf89f4d43f5823d14995250f3ffbd0f0d/packages/client/src/pages/assets.vue#L110

Be related to:

webfansplz/vite-plugin-vue-devtools#241

webfansplz/vite-plugin-vue-devtools#206

Also similar to:

webfansplz/vite-plugin-vue-inspector#72

Discussed in #115

This is a live list that will be updated accordingly:

• UI package (@alexzhang1030 )
• Browser extension (@webfansplz )
  • panel mode
  • popup page
  • view mode support (overlay & panel)
• Core (@webfansplz )
  • Bridge messaging
  • Vue hook
• DevTools Client (@webfansplz @alexzhang1030 )
• Vite plugin (@webfansplz )
• [In Progress] Plugin API (@webfansplz )
• Electron App
• SSR Support
• [Low Priority] Webpack plugin
• Others
  Vue2 support (As not planned)

✏️ This is a draft note about a unified set of standard APIs to create devtools. I discussed about this a bit with @antfu too and trying to write down some ideas about it.

The idea is to standardize things to be able to :

• One one side create shells to host dev tools

  • Various types of shell:
    • browser extension
    • embedded pane
    • standalone app
    • multi-devtools app
  • Implementation is not standardized, but following the standard would make any shell compatible with the applets

• On the other side create devtools applets/plugins to implement various tooling and development features

  • We would have standard APIs to write logic that could be executed in various contexts:
    • Devtools UI
    • In the page
    • Vite plugin
    • Node process
    • ...
  • Provide standard APIs to communicate seamlessly no matter which context we are in
  • Standard manifest and APIs to expose functionality to the shell, for example:
    • Tabs/Launchers: title, icon, notification...
    • Settings
    • Search results/Command palette
    • Keyboard shortcuts
    • ...

Use cases

Then creating the equivalent of the current Nuxt devtools would be to pick a "embedded pane" shell and add various applets like "pages", "routing", "auto-imports"... For Vue devtools, it would be different set of applets.

Then we could put all of those applets into a "standalone app" shell and it would still work because communication between "Devtools UI" and "In the page" contexts are abstracted away.

A multi-devtools app like guijs could also implement this standard and have working vue components tree directly inside it. New applets ideas coming from it could be installing packages, killing ports, etc.

Should also hide open-in-editor button on some page.

Be related to webfansplz/vite-plugin-vue-devtools#263

refer to nuxt/devtools#247

maybe we can implement a command palette for tab search, vue docs search, vueuse docs search(custom tab API)

I'm interested in implementing this feature.

Also, the edit state looks like re-render too many times.

/cc @alexzhang1030

I just tried to switch to the Vite plugin. Now my app freezes, loads extremely slowly, or Edge starts asking if I want to kill the tab when I load the page. Had to disable it again.

I see the same behavior with the current browser plugin, if DevTools is open (on the Vue tab or not) while loading the page. If I wait for the page to load and render, I can usually use the Vue DevTools plugin without issue, though I sometimes have to close and reopen it if my actions involve destroying or creating a large number of components.

Admittedly, this particular page is a beast -- it probably has on the order of 8,000 component instances mounted when loaded, a significant amount of data loaded from the API, and a number of computed props based on that data. RAM use is 250-400MB on average. It's a large, complex, interactive UI. (Unfortunately proprietary, can't share it publicly.)

I'm working to improve the mounted component count, but regardless, DevTools should ideally do as little as possible when the tools aren't actually open yet, to avoid creating performance issues where there are a large number of component instances being created and mounted.

It may also occur on other custom property.
The custom property is not been correctly deserialized on editing.

In the reproduction, the count property should be deserialized as native type number.
Reproduction:

When clicking the "target" button to select components on the page to inspect:

• The devtools should be minimized after clicking the button. Otherwise it covers components that need to be selected.
• When selecting components, the highlighting seems to be a bit off compared to when hovering over the component tree in the inspector, see video below:

Be related to #35

First, this new version of Vue DevTools looks really awesome for so many reasons so... thank you! 🙏

I'm working on a project with 2 machines: one using Ubuntu, the other one with Windows 11 + WSL.
I installed the Vite plugin and it works fine on my Ubuntu machine but not on my Windows one.

I have the following error message when I try to open a component:

Could not open MyFile.vue in the editor.

My Vue server is running inside WSL but the app is displayed on Windows.

I suspect this is not specific to WSL but likely to any remote environment (since, from my understanding, this is how the VS Code WSL extension works).

Tell me if you need any additional information!

Port from Nuxt DevTools directly:

Port from Nuxt DevTools directly:

• Index page
  • connection style
  • host/port input
• Vite only tab support

• timeline page
• router page
• pinia page

Caused by https://github.com/webfansplz/vue-devtools-next/blob/0aa1ee90932ee80f8672d38137b4da0e85eb322a/packages/devtools-kit/src/core/general/state.ts#L41

We might need to hide router in the Nuxt application directly or find a better way to handle it.

Be related to webfansplz/vite-plugin-vue-devtools#265

https://github.com/webfansplz/vue-devtools-next/blob/0aa1ee90932ee80f8672d38137b4da0e85eb322a/packages/core/src/vite-rpc/rpc.ts#L1

Be related to vite-dev-rpc PR

The current devtools are available as a pane in the devtools and as a standalone electron app. IMO we should keep those as some people prefer having the devtools in the browser devtools pane. The electron app is also very useful to debug native environments, for example NativeScript.

With the new 7.0 release, the devtools bar at the bottom of my window no longer shows up, the old RC is fine.

Have't used vue-router will cause the Pages page will report an error.

Branch: Main

Reproduction:
https://github.com/vuejs/devtools-next/assets/22590005/db6f2057-fdd7-46cd-88db-5bb16a6128a8