크롬 개발자 도구 - Elements

 

 

 

크롬 개발자 도구 - Elements

·         개발자 도구를 열어을 때 가장 처음 표시되는 도구입니다.

·         HTML, CSS가 잘 출력되고 동작되고 있는 지 확인 할 수 있는 기능을 제공해 주며 다양한 방법으로 속성을 추가/제거 및 변경할 수 있게 해 줍니다.

·         디버깅을 위해 기능을 테스트하거나 속성을 변경 할 때 사용합니다.

 

 

 

HTML구조가 보이고 화살표를 펼치고 접어서 트리된 HTML구조를 탐색할 수 있습니다.

 

 

하단에는 선택 요소의 계층 정보를 확인할 수 있습니다.

 

 

 

 

Styles

특정 요소를 선택하고 오른쪽 창을 보면 Styles탭이 보이며 여기의 정보를 수정하여 스타일을 변경해 볼 수 있습니다.

이 부분에서 CSS 디버깅을 할 수 있습니다.

 

 

오른쪽의 [+]아이콘을 클릭하여 새로운 스타일 룰을 생성할 수 있습니다.

 

 

* { border: 3px solid red; }

 

 

 

 

 

 

Computed

최종 적용된 스타일 정보를 확인할 수 있습니다.

 

 

 

 

 

Event Listeners

선택된 요소에 적용된 이벤트 정보를 확인할 수 있습니다.