Chrome - 개발자 도구 사용법

HTTS, CSS, JS를 공부중일 때 

사이트 분석하기 좋은 툴은 구글에서 제공하고 있습니다.

 그것은 크롬 개발자 도구

 

오른쪽 코드가보이는 것이 개발자 도구 실행화면이다.

 

개발자 도구는 F12 나 Ctrl+Shift+I를 통해서 편리하게 실행할 수 있다. 

 

크롬 개발자 도구의 장점

① 제작한 웹페이지의 문제점을 찾기 유용하다. HTML코드를 위에서부터 하나하나 리뷰하지 않아도 된다 !

② 웹사이트가 어떤 구조로 이루어져 있고, 어떤 스타일이 사용되었는지 참고하기 좋다.

 

 

구조 살펴보기 

개발자 도구는 패널 메뉴와 패널 도구로 나뉜다.

 

① 검사도구 : 검사하고 싶은 영역을 선택하게 도와줌

② 디바이스 모두 : 디바이스별 화면을 확인

③ Elements : 태그를 분석하고 실시간 수정하게 도와줌

④ Console : JS의 콘솔 메시지 출력 정보 확인

⑤ Sources : 웹페이지 포함된 모든 리소스 볼 수 있음

                                                                                  ⑥ Network : 리소스 로딩시간, 타입 등 정보 확인

 

 

요소(Element) 선택자 

현재 로딩되어 있는 웹페이지의 요소를 선택해 상세 정보(태그 정보, CSS 정보)와 소스보기의 해당 위치로 바로 이동시켜 준다. 

 

태그이름, CSS정보가 표시된다.

Elements : HTML 요소 탭

소스의 태그 위로 마우스 커서를 가져가면 웹페이지 화면에 툴팁으로 해당 태그의 상세한 속성 정보를 보여줍니다.

태그의 내용이 길 경우 기본적으로 태그만 표시되고 ,태그 왼쪽의 화살표를 클릭해 펼쳐서 확인할 수 있다.

---

Styles와 Computed

Styles와 Computed는 선택된 태그의 CSS를 한눈에 확인하고 수정 가능하다.

 

Styles

개발자가 해당 태그에 적용한 모든 CSS가 표시된다. 

취소선은 취소된 CSS이다.

여기의 정보를 수정하여 스타일을 변경해 볼 수 있다.

 

 

 

 

 

 

 

 

 

 

 

 

Computed 

최종적으로 적용된 CSS를 확인할 수 있다.

디자인대로 퍼블리싱 되었는지 한눈에 확인이 가능하다.