Debug JavaScript Keyboard Events & KeyCodes ⌨️

Inspect key, code, and which properties in real-time. Built for developers mapping shortcuts, debugging game controls, or exploring browser event handling.

🚀 High-Performance Inspection

Stop console-logging your way through event listeners. This utility provides an instant, zero-config environment to capture keystroke data.

• Start Typing: Press any key to see event data update instantly.
• Monitor Modifiers: Track the real-time status of Shift, Ctrl, Alt, and Meta (Cmd/Win) keys.
• Prevent Default Actions: Toggle "Prevent Default" to test keys like Tab, F5, or F12 without refreshing the page or shifting focus.
• Review Input History: Access a chronological log to debug complex key sequences and event flows.

📘 Key vs. Code: The Essentials

Understanding the difference between these properties is vital for robust input handling:

• event.key: Represents the character produced. It changes based on modifiers and keyboard layouts (e.g., "a" vs. "A"). Use this for text-entry logic.
• event.code: Represents the physical button on the hardware (e.g., KeyQ). Use this for game controls (WASD) or layout-dependent shortcuts.

🧐 FAQ

Why is the which value 229? This typically indicates an active IME (Input Method Editor), common for Japanese or Chinese input. Disable the IME to see raw key data.

Is which still relevant? It is deprecated in favor of .key and .code. We include it specifically to help you debug legacy projects and older libraries.

How do I detect the Mac Command key? The browser identifies it as the Meta key. This tool tracks it automatically across Windows and macOS.