개발 도구 · 브라우저 실행
키코드 정보
포커스된 캡처 영역에서 event.key·code·legacy keyCode·수식 키와 최근 기록을 확인합니다.Keyboard event inspector
포커스된 캡처 영역에서 키 이벤트 값을 확인합니다
이 영역을 누른 뒤 확인할 키를 입력하세요페이지 전체가 아니라 이 포커스 영역에서만 기본 키 동작을 막습니다.
최근 20개 키 기록
현재 탭 메모리에만 유지됩니다.
캡처 영역에 포커스를 두고 키를 입력해 주세요.
빠른 사용법
세 단계로 확인합니다.
- 1키 캡처 영역에 포커스를 둡니다
페이지 전체가 아니라 점선 캡처 카드만 클릭하거나 키보드로 선택합니다.
- 2확인할 키 조합을 입력합니다
event.key·event.code·legacy keyCode와 Ctrl·Alt·Shift·Meta 상태를 봅니다.
- 3최근 기록을 비교하고 비웁니다
현재 탭 메모리의 최대 20개 기록을 확인한 뒤 필요하면 즉시 초기화합니다.
결과 읽기
key와 code는 같은 키보드 이벤트의 서로 다른 관점입니다.
key는 레이아웃과 modifier가 반영된 의미, code는 물리적 키 위치에 가까우며 legacy keyCode는 호환 참고용입니다.KEY입력 의미
event.key는 A·a·Enter처럼 현재 레이아웃과 modifier가 적용된 값을 제공합니다.
CODE물리 위치
event.code는 KeyA·Digit1처럼 키보드 위치 기준 식별에 유용하지만 모든 장치에서 같다고 보장되지는 않습니다.
SCOPE포커스 범위
전역 키 이벤트를 가로채지 않고 명시적으로 포커스한 캡처 영역에서만 preventDefault를 적용합니다.
keyCode는 deprecated 호환 값이며 새 구현의 주 식별자로 권장하지 않습니다. 접근성 단축키는 브라우저·운영체제·보조기술 키와 충돌하지 않게 설계하세요.
이럴 때 유용합니다.
- 키보드 이벤트 디버깅
- 단축키 코드 확인
- 국문·영문 레이아웃 차이 관찰
함께 확인하세요.
- keyCode는 legacy 값
- 모바일·IME·특수 장치 결과 차이
- 전역 단축키 설계 전 접근성 검토
자주 묻는 질문
사용 전 알아둘 점
event.key와 event.code 중 무엇을 쓰나요?
입력 의미가 필요하면 key, 물리적 위치가 필요하면 code를 검토하되 제품 요구와 키보드 레이아웃을 함께 테스트하세요.
왜 페이지 전체에서 키를 잡지 않나요?
검색·탐색·보조기술 키를 방해하지 않도록 사용자가 포커스한 캡처 영역으로 제한했습니다.
기록이 저장되나요?
아닙니다. 최대 20개가 현재 탭 메모리에만 있고 새로고침 시 사라집니다.