개요
Elements 패널은 DOM 노드를 검사하고 수정할 수 있습니다.
Elements 패널의 구성
Elements 패널은 다음과 같이 구성되어 있습니다.
- (왼쪽) DOM 트리: 현재 페이지의 DOM 트리입니다.
-
(오른쪽) 탭 영역: DOM 트리에서 선택한 노드에 대한 정보를 확인하고 수정할 수 있습니다.
- Styles: 선택한 요소의 스타일을 확인하고 수정할 수 있습니다.
- Computed: 선택한 요소의 계산된 스타일을 확인할 수 있습니다.
- Layout: 선택한 요소의 레이아웃 정보를 확인할 수 있습니다.
- Event Listeners: 선택한 요소에 등록된 이벤트 리스너를 확인할 수 있습니다.
- DOM Breakpoints: 선택한 요소에 DOM 변경 사항이 발생할 때 디버거를 중단시킬 수 있습니다.
- Properties: 선택한 요소의 속성을 확인하고 수정할 수 있습니다.
- Accessibility: 선택한 요소의 접근성 정보를 확인할 수 있습니다.
아쉽게도 오늘 시간에 모든 것들을 다룰 수 없어 Elements 탭에서 가장 많이 쓰는 기능 & 탭을 중심으로 설명하고자합니다. 🥲
- DOM 트리
- Styles 탭
- Computed 탭