diff --git a/packages/client/src/App.vue b/packages/client/src/App.vue index a56b94992..3c874aa22 100644 --- a/packages/client/src/App.vue +++ b/packages/client/src/App.vue @@ -51,6 +51,12 @@ watch(devtoolsReady, (v) => { useEventListener('keydown', (e) => { if (e.code === 'KeyD' && e.altKey && e.shiftKey) rpc.value.emit('toggle-panel') + // Toggle component inspector with Alt(Option) + Shift + C + if (e.code === 'KeyC' && e.altKey && e.shiftKey && vueInspectorDetected.value) { + e.preventDefault() + rpc.value.emit('toggle-panel', false) + rpc.value.enableVueInspector() + } }) watchEffect(() => { diff --git a/packages/overlay/src/App.vue b/packages/overlay/src/App.vue index a76137282..cb376d8d1 100644 --- a/packages/overlay/src/App.vue +++ b/packages/overlay/src/App.vue @@ -83,6 +83,14 @@ addEventListener('keyup', (e) => { } }) +// Toggle component inspector with Alt(Option) + Shift + C +addEventListener('keydown', (e) => { + if (e.code === 'KeyC' && e.altKey && e.shiftKey && vueInspectorSupported.value) { + e.preventDefault() + toggleVueInspector() + } +}) + const vueInspectorSupported = computed(() => { return !!(devtools.ctx.state.vitePluginDetected && vueInspector.value) }) diff --git a/packages/vite/src/vite.ts b/packages/vite/src/vite.ts index 3153094a9..6a162eb58 100644 --- a/packages/vite/src/vite.ts +++ b/packages/vite/src/vite.ts @@ -129,6 +129,10 @@ export default function VitePluginVueDevTools(options?: VitePluginVueDevToolsOpt console.log(` ${green('➜')} ${bold('Vue DevTools')}: ${green(`Open ${colorUrl(`${devtoolsUrl}`)} as a separate window`)}`) } console.log(` ${green('➜')} ${bold('Vue DevTools')}: ${green(`Press ${yellow(keys)} in App to toggle the Vue DevTools`)}`) + if (pluginOptions.componentInspector) { + const inspectorKeys = normalizeComboKeyPrint('option-shift-c') + console.log(` ${green('➜')} ${bold('Vue DevTools')}: ${green(`Press ${yellow(inspectorKeys)} in App to toggle the Component Inspector`)}`) + } } }