Problem
The Source Inspector ("Go to source") is triggered by Shift + Cmd (Meta) + Click, which is hardcoded in source-inspector.tsx:
const isShiftHeld = keys.includes('SHIFT')
const isCtrlHeld = keys.includes('CONTROL')
const isMetaHeld = keys.includes('META')
return isShiftHeld && (isCtrlHeld || isMetaHeld)On macOS, Shift + Cmd + 4 is the system screenshot shortcut (region capture). When you press Shift + Cmd to start a screenshot, the Source Inspector immediately activates and highlights elements under the cursor — the highlight overlay ends up captured in the screenshot.
This is a pretty common workflow conflict since virtually every Mac user uses Shift+Cmd+4 regularly.
Proposed Solution
Make the Source Inspector modifier keys configurable via the Vite plugin options, e.g.:
devtools({
injectSource: {
enabled: true,
modifierKeys: ['Alt', 'Shift'], // default: ['Shift', 'Meta'] or ['Shift', 'Control']
},
})The current hardcoded Shift + Meta/Ctrl default is fine, but users should be able to change it to avoid conflicts with OS-level shortcuts.
Environment
- macOS (Apple Silicon)
@tanstack/devtools-vite- Affects any Mac user who takes screenshots with Shift+Cmd+4
Problem
The Source Inspector ("Go to source") is triggered by Shift + Cmd (Meta) + Click, which is hardcoded in
source-inspector.tsx:On macOS, Shift + Cmd + 4 is the system screenshot shortcut (region capture). When you press Shift + Cmd to start a screenshot, the Source Inspector immediately activates and highlights elements under the cursor — the highlight overlay ends up captured in the screenshot.
This is a pretty common workflow conflict since virtually every Mac user uses Shift+Cmd+4 regularly.
Proposed Solution
Make the Source Inspector modifier keys configurable via the Vite plugin options, e.g.:
The current hardcoded
Shift + Meta/Ctrldefault is fine, but users should be able to change it to avoid conflicts with OS-level shortcuts.Environment
@tanstack/devtools-vite