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

[ronaldevers]

🐛 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

[TheAlexLichter]

As someone using the German layout, I feel the pain of i18n keyboard layout.

One option could be using the Keyboard API (chromium only), if available, and else fall back to the current flow.