Tracking: DevTools v4 UX and performance feedback #1153

Tracks the work coming out of user feedback on Nuxt DevTools 4.0.0, which was shared on Discord.

Feedback

1. The Vue component inspector moved behind the Components tab; people expect it one click away from the dock, as in v3.
2. Clicking inspect inside DevTools leaves the panel covering the page you want to pick from.
3. Button meanings are unclear: the magnifying glass is Vite Inspect, not the component inspector.
4. Wish: pin often-used tools to the toolbar (e.g. by right-clicking) and show recently used ones.
5. No obvious way to turn off the MCP tools, which appear to cause errors in some setups.
6. Lag: a simple slider + math project freezes the whole page; possible excessive memory use.

Done

• Page freeze (6): the host client deep-watched nuxt.payload, re-traversing all of it on every state change. With a 20k-item useState, a 10 s slider drag took 52–76 s, with every input event a long task. It is now back to 10 s. fix(client): stop re-traversing the payload on every state change #1151
• MCP opt-out (5): new devtools.mcp option. Also fixed: Nuxt's Vite DevTools defaults, including disableAuthorization, were ignored on Vite < 8.3. feat: add mcp option to turn off the Vite DevTools MCP endpoint #1149
• Toggle dock actions (1, 2): the hub hides and restores the panel while a tool is active, highlights the button, and stops the tool on Escape; entries get a description for tooltips. feat(hub): add toggle dock actions and entry descriptions devframes/devframe#469
• Pin and recent tools (4): right-click menu with Pin on every dock button, including group members; pinned group members get their own bar button; up to 3 recently used tools stay on the bar. Nuxt needs no change. feat(hub-ui): pin group members to the dock bar and keep recent tools devframes/devframe#470

In progress

• vue-tracer dock action as a toggle tool (1, 3): uses the Component Inspector does not work on SSR content #469 API, lets the host handle picks, has a clearer title and a Mod+Shift+X shortcut. Released in v1.7.0. feat(devtools): make the dock entry a toggle inspector antfu/vite-plugin-vue-tracer#16
• Nuxt uses vue-tracer's dock action (1, 2): bumps devframe to 1.3.1 and vue-tracer to 1.7.0; the Components tab button drives the same tool; fixes devtools.close(). Ready for review. Nuxt's inspect popup now uses the browser's top layer, so it stays above the panel the hub restores after a pick; vue-tracer needs no change. feat: one-click component inspector via vue-tracer's dock action #1150
  • devframe 1.3.0: a toggle action didn't actually hide the panel. Fixed in fix(hub-ui): hide the panel while a toggle action is on devframes/devframe#477, released in v1.3.1.

Follow-ups

• Release Devframe with Component Inspector does not work on SSR content #469 / feat(modules): dynamic sorting for module installation list #470 (v1.3.0) and vue-tracer#16 (v1.7.0); bumped in feat: one-click component inspector via vue-tracer's dock action #1150.
• Release the devframe fix above (v1.3.1), bump it in feat: one-click component inspector via vue-tracer's dock action #1150 and re-test in a browser.
• Decide whether Nuxt DevTools should default mcp to false. It is currently 'auto', Vite DevTools' default.
• Ask the reporters for:
  • their MCP error output (no MCP errors reproduced locally);
  • their project or video, to confirm fix(client): stop re-traversing the payload on every state change #1151 covers the lag. The same deep watch existed in v3.4.4, so it may not be the whole v3 → v4 difference.
• Check performance in Firefox. The reporters use Floorp, and the measurements above are Chromium only. Memory looked fine there: post-GC heap stayed flat across repeated drags, and with the Vue DevTools panel open it grew ~6 MB then plateaued.
• Fix autofix.ci looping on packages/devtools-ui-kit/src/components/NDrawer.vue. It swaps z-10 z-20 back and forth until it gives up after three attempts, on every PR; one of the two classes is redundant.