DevToolKit

Keycode & Event Inspector

Instantly get event.key, event.code, and legacy which values for any key press. Features modifier tracking, event history, and JSON export. 100% private.

Input Utility

Event Inspector

Ready for Input

Press any key on your keyboard to view detailed event parameters.
Was this tool helpful?

How to Use

The Keycode & Event Inspector is a real-time diagnostic tool for keyboard interactions, helping developers understand how browsers interpret user input.

How to use this tool

  1. Focus: Ensure this browser tab is active.
  2. Press Key: Press any key or key combination on your keyboard. The tool captures keydown events instantly.
  3. Inspect Values: View the primary Legacy which code, along with modern event.key and event.code properties.
  4. Track Modifiers: Active modifier keys (Shift, Ctrl, Alt, Meta) are highlighted in real-time.
  5. Export: Use the Copy JSON button to grab the complete event object for use in your unit tests or documentation.

About This Tool

Modern Input Handling

Keyboard event properties have evolved significantly. While legacy keyCode and which are still common in older tutorials, modern web development prioritizes event.key (the value) and event.code (the physical key).

Our inspector provides full visibility into the Event Anatomy, including location data (e.g., distinguishing between Numpad Enter and standard Enter), making it the ultimate workbench for building accessibility-compliant and internationalized input systems.

Why Use This Tool

Zero-Latency, Zero-Server

Input diagnostics require immediate feedback. DevToolKit's inspector runs **100% locally** in your browser main thread with zero server overhead. We don't log your keystrokes—your input stays private and local to your device.

FAQ

What is the difference between event.key and event.code?
event.key returns the character value produced by the key (e.g., 'a', 'A', 'Enter'), which varies depending on the keyboard layout and Shift state. event.code returns the physical key code (e.g., 'KeyA', 'Enter'), which is consistent regardless of layout. Use event.key for text input and event.code for keyboard shortcuts.
What is the legacy 'which' value?
event.which and event.keyCode are deprecated properties that return numeric codes for each key. They have been replaced by event.key and event.code in modern browsers. This tool displays them for compatibility with legacy code that still uses these values.
Why does the same key press produce different values on different keyboards?
event.key depends on the keyboard layout (QWERTY, AZERTY, DVORAK). The physical key in the same position produces different characters depending on the layout. event.code always reflects the physical position, so 'KeyA' is always the key in that position regardless of layout.
Are my keystrokes being recorded?
No. All event processing runs locally in your browser. No keystrokes are sent to servers or stored. The tool only listens for keyboard events while the page is in focus.
NavigateOpenEscClose