[edwith] 초보 HTML&CSS 6강 - 개발자도구(Elements tab)을 활용한 HTML CSS 디버깅

크롬 개발자도구 사용하기

 

개발자도구 열기
- F12
- Ctrl+Shift+I
- 설정>도구 더보기>개발자 도구

 

 

개발자도구 주요기능

 

 

검사(Inspector) 기능

↙아이콘 클릭 후 화면에서 원하는 요소 클릭.

해당하는 element와 스타일 등 확인 가능

 

element 상태 편집

- 삭제 : 해당 코드 오른클릭, Delete element

- 숨기기 : 해당 코드 오른클릭, Hide element

- 코드 편집 : 해당 코드 더블클릭해 속성/값 등을 변경

 

element 스타일 편집

- 화면상의 요소 상태(마우스 오버 시, 클릭 중, 방문 후)에 따른 스타일 확인

    : Styles > 필터 옆 :hov > 원하는 상태 선택 (중복선택 가능)

- 선택된 요소에 적용된 모든 스타일 확인

    : Computed > 아래로 스크롤

- 코드 편집 : 해당 코드 더블클릭해 속성/값 등을 변경