fix: keyboard shortcut does not work with non-qwerty keyboard layout

🐛 The bug

I use an alternative keyboard layout. When I hit "shift-option-D" to open the devtools, then nothing happens.

The problem is in using KeyboardEvent.code vs .key. When I hit my D, then the event contains {code: "d", key: "KeyW"!

The code in https://github.com/nuxt/devtools/blob/main/packages/devtools/src/runtime/plugins/view/client.ts#L274 uses KeyboardEvent.code which refers to the physical key being pressed. Alternatively, the code could use KeyboardEvent.key, which is d when I press D in my layout. Unfortunately in combination with Shift and Option the event becomes {altKey: true, code: "KeyW", key: "Î", shiftKey: true}!

I see (in Chrome) the KeyboardEvent attribute keyCode which does not change with and without modifier keys pressed, it is 68. So the code could use this property and it would work regardless of keyboard layout. The KeyboardEvent.keyCode attribute is deprecated however. 😢 I also see an undocumented (?) KeyboardEvent.which which is also 68.

I thought I'd send a PR, but I genuinely don't know what the correct solution would be here!

🛠️ To reproduce

• select alternate keyboard layout like colemak or workman, I'm on a mac in case that's relevant

🌈 Expected behavior

Shift-Option-D should open devtools, regardless of the user's current keyboard layout.

ℹ️ Additional context

No response

Start at packages/devtools/src/runtime/plugins/view/client.ts around line 274 and reproduce the shortcut with a Colemak or Workman layout on macOS. Investigate which KeyboardEvent data remains reliable with Shift and Option, then verify that Shift-Option-D opens devtools regardless of layout.