트랙 요소 포커스

Kayce Basques
Kayce Basques
Alexandra Klepper
Alexandra Klepper

페이지의 키보드 탐색 접근성을 테스트한다고 가정해 보겠습니다. Tab 키로 페이지를 탐색할 때 포커스가 있는 요소가 숨겨져 포커스 링이 사라지는 경우가 있습니다. DevTools에서 포커스가 있는 요소를 추적하려면 다음 단계를 따르세요.

  1. 콘솔 을 엽니다.
  2. 실시간 표현식 만들기를 클릭합니다.

    실시간 표현식 만들기

    실시간 표현식으로 JavaScript 값을 실시간으로 시청에서 자세히 알아보세요.

  3. document.activeElement를 입력합니다.

  4. 실시간 표현식 인터페이스 외부를 클릭하여 저장합니다.

document.activeElement 뒤의 값은 표현식의 결과입니다. 이 표현식은 항상 포커스가 있는 요소를 나타내므로 포커스가 있는 요소를 추적할 수 있습니다.

  • 결과 위로 마우스를 가져가 표시 영역에서 포커스가 있는 요소를 강조표시합니다.
  • 결과를 마우스 오른쪽 버튼으로 클릭하고 요소 패널에서 열기 를 선택하여 요소 패널의 DOM 트리에 요소를 표시합니다.
  • 결과를 마우스 오른쪽 버튼으로 클릭하고 전역 변수로 저장 을 선택하여 콘솔 에서 사용할 수 있는 노드에 대한 변수 참조를 만듭니다.