웹페이지에서 focus(포커스)가 어디에 있는지 확인하기

tabindex 를 활용하거나, 포커스의 이동 경로를 설정하는 등의 스크립트를 실행한 경우, 현재 포커스가 어디에 가 있는지 확인하기가 어려울 때가 있습니다. 이럴 때에 브라우저 콘솔창을 통해 간단하게 현재 포커스가 어디 있는지 확인할 수 있습니다.

크롬 또는 개발자 도구를 지원하는 브라우저를 실행한 후 개발자 도구에 들어가 콘솔창에 다음과 커맨드를 통해 현재 포커스의 위치 확인이 가능합니다.

console.log(document.activeElement);

포커스의 위치 확인 용도 뿐 아니라 필요한 경우 DOM 또는 스타일을 제어하는 자바스크립트 코드 생성 시에도 활용이 될 수 있을 것으로 보입니다.