What Is a Keycode Info Tool?
A keycode info tool captures one keyboard event in the browser and shows the fields developers usually inspect when building shortcut handlers or accessibility interactions. This implementation records a keydown on the on-page capture button and prints the key value, physical code, legacy keyCode, key location, and the Ctrl, Alt, Shift, and Meta modifier states. It is intentionally lightweight, so it does not log keyup events, event sequences, repeat timing, or IME composition details.
How to Use the Keycode Info Tool
- 1Click the capture box labeled Click here, then press a key so the button has keyboard focus.
- 2Press the key or shortcut combination you want to inspect, and let the page capture that keydown event.
- 3Read the Key event output area for the key, code, keyCode, location, and modifier flags, then repeat the process with another key if you need to compare results.
Common Keycode Inspection Use Cases
Building keyboard shortcuts
Confirm the exact key and modifier combination your app receives before you wire up command palettes, editor shortcuts, or navigation hotkeys.
Comparing physical versus logical keys
Check how code and key differ on international layouts or when the same physical key produces a different character than you expect.
Debugging legacy keyCode usage
Capture the older keyCode value alongside modern fields when you still support code paths or libraries that rely on legacy keyboard APIs.
Frequently asked questions
Does this tool record everything I type on the page?
No. It only captures the keydown sent to the dedicated focusable button after you click it, and the captured values stay in the page rather than being sent to a remote service.
Why can key and code be different for the same press?
Key usually reflects the character or logical action produced by your layout, while code identifies the physical key position. Both are useful when shortcut behavior must survive layout changes.