Overview
Press any key and see exactly what the browser reports: the logical key value, the physical key code, the legacy keyCode and which numbers, and the state of every modifier. A focused capture box prevents shortcuts from firing while you test, and each result copies with one click.
How It Works
Click the dashed capture area so it has keyboard focus, then press the key you want to inspect. The panel fills with eight cards: key, code, keyCode, which, and the four modifier booleans (altKey, ctrlKey, shiftKey, metaKey). The capture box swallows the keydown event so combinations like Tab or Ctrl+something do not trigger browser actions. Click any card to copy that single value; press another key to capture it instead.
Step-by-Step Usage Guide
- Click the dashed capture box to give it focus.
- Press the key or key combination you want to inspect.
- Read the eight result cards, including modifier states.
- Click a card to copy that value, then press the next key to replace the capture.
Technical Specifications & Standards
The tool displays the three parallel identities of a keypress that the DOM gives you. key is the logical character or action, such as a, A, ArrowLeft, or Enter, and it changes with Shift and keyboard layout. code identifies the physical key position, such as KeyA, and stays stable across modifiers and layouts. keyCode and which are numeric codes inherited from early DOM events; they are deprecated in the UI Events specification but still widely used in legacy code and older Stack Overflow answers, which is precisely why the tool surfaces them alongside the modern values. The keydown listener calls preventDefault, so most keys will not scroll, tab focus, or navigate while the capture box is focused; the operating system still owns some keys, so the Windows key or certain function-key combinations may be intercepted before the browser sees them. Only one key at a time is captured, and auto-repeat simply re-captures the same key rather than counting repeats.
Targeted Use Cases
- Choosing between key and code in a keyboard handler so shortcuts work on international layouts.
- Finding the legacy keyCode a colleague's old code expects.
- Debugging why a game ignores a key by checking modifier states.
- Building accessible shortcuts that avoid conflicts with browser key bindings.
Notes & Gotchas
- Prefer e.key for character-sensitive logic and e.code for position-sensitive shortcuts like WASD movement.
- Do not ship new code against keyCode or which; they are deprecated and layout-dependent.
- Test the same physical key with and without Shift to see how key changes while code stays constant.
- Remember the capture box must have focus; the tool does not listen globally.
Frequently Asked Questions
Why do key and code differ for the same press?
key is the character or named action the layout produces, while code names the physical switch regardless of layout or modifiers. On a German layout the key Y and Z positions swap relative to the US layout, but code stays KeyZ for the same physical position.
Are keyCode and which still useful?
Only for reading legacy code. They are deprecated in the UI Events specification and vary between browsers and platforms, but many old snippets check them, so the tool shows what they would be for each key.
Why did the Windows key not register?
The operating system intercepts some keys, such as the Windows key and certain system combinations, before the browser event fires. The capture box can only show events the browser actually receives.
Does holding a key down count repeats?
The keydown event fires repeatedly, and each repeat re-captures the same values, so the display stays the same. There is no repeat counter; the tool shows the state of the most recent event.