feat: add keyboard shortcut (Alt+Shift+C) to toggle Component Inspector

[JamesGoslings]

Description

Closes #1058

This PR adds a keyboard shortcut Alt(Option)+Shift+C to toggle the Component Inspector, solving the pain point where clicking to activate the inspector causes pop-ups/overlays to close.

Motivation

Many UI libraries auto-close pop-ups on outside click. When using the Component Inspector to locate components inside these pop-ups, clicking activates the inspector but simultaneously closes the pop-up. A keyboard shortcut avoids this issue entirely.

Changes

File	Change
packages/overlay/src/App.vue	Add Alt+Shift+C keydown listener to call toggleVueInspector()
packages/client/src/App.vue	Add the same shortcut in client iframe, triggering inspector via RPC
packages/vite/src/vite.ts	Print shortcut hint in terminal when Vite dev server starts

How it works

• The shortcut follows the same pattern as the existing Alt+Shift+D (toggle DevTools panel)
• Alt maps to Option on macOS automatically (via e.altKey)
• The shortcut only activates when vueInspectorSupported / vueInspectorDetected is true
• Escape still works to exit the inspector (unchanged)

Terminal output

Test

Note

The issue author also mentioned customizable shortcuts. Since all existing shortcuts in the project (Alt+Shift+D, Escape) are hardcoded, adding customization would require architectural changes (e.g. passing user config through virtual modules to runtime). This can be addressed in a follow-up PR if needed.

[netlify]

✅ Deploy Preview for vue-devtools-docs canceled.

Name	Link
🔨 Latest commit	465bcd2
🔍 Latest deploy log	https://app.netlify.com/projects/vue-devtools-docs/deploys/69f50a90ead3dd0008452a23

[skirtles-code]

This seems to work well for me.

A few thoughts...

---

There's a similar (but different) feature request in #495. While it is separate to the feature being requested here, I do think it's worth considering in the context of how we'd like keyboard shortcuts to work more generally.

In particular, it's not clear to me that all keyboard shortcuts should be listed in the console when starting Vite.

I wonder whether it might be better to add the shortcuts to the button tooltips instead?

---

What's the reason for the e.preventDefault() calls in the two listeners? Are they precautionary or is there something specific they're intended to prevent?

---

Personally, I'd remove the code comments. I think the code is clear enough without them.

[JamesGoslings]

@skirtles-code Thanks for the review! I've pushed an update addressing your feedback.

In particular, it's not clear to me that all keyboard shortcuts should be listed in the console when starting Vite. I wonder whether it might be better to add the shortcuts to the button tooltips instead?

Good point. I've removed the console output and added the shortcut hint to the button tooltips instead. For consistency, I also added Alt+Shift+D to the main DevTools panel button tooltip.

What's the reason for the e.preventDefault() calls in the two listeners?

They were precautionary — Alt+Shift+C doesn't have any default browser behavior to prevent, so I've removed them.

Personally, I'd remove the code comments.

Removed. Agreed the code is self-explanatory.

There's a similar (but different) feature request in #495. ... it's worth considering in the context of how we'd like keyboard shortcuts to work more generally.

Agreed. A unified, possibly user-configurable shortcut system would be valuable (the original issue also asked for customization). Happy to work on it in a follow-up once the overall direction is decided. This PR focuses on the minimal change for #1058.