[Chrome] 크롬 개발자 도구를 이용한 디버깅

※ 개인 의견이기 때문에 절대로 정답이 아님

※ 프로젝트를 수행하면 상황에 따라 다르지만 웹 서비스를 디버깅할 때 유용한 팁

 

1. 크롬 개발자도구 창 활성화

단축키 : F12, Ctrl+Shift+I

 

 

개발자 도구를 활성화 하게 되면 아래 그림과 같이 표시된다.

※ 화면이 분할되어 기존 스타일이 망가질 수 있기 때문에 Dock 위치를 변경하는 편이다.

※ 아래 그림 중 Dock Side 영역에 가장 왼쪽에 있는 옵션을 클릭

 

 

크롬창 활성화는 준비되었다. 

 

2. html element 선택

크롬 개발자 도구에서 아래 빨간색 위치에 있는 버튼(Select an element in the page to inspect it )을 클릭한다.

단축키 : Ctrl + Shift + C

그리고 원하는 html element 를 클릭한다.

 

그러면 크롬 개발자 도구에서 해당 element의 위치로 이동하게 된다.

 

3. 소스 확인 및 수정

크롬 개발자 도구 상단에 있는 많은 기능들 중 자주 사용하는 기능들

기능명	설명
Elements	html page 내 element 정보가 적혀있다
Console	javascript 명령어를 실행하고 확인할 수 있다
Sources	page 소스 정보를 확인, breakpoint 를 이용한 디버깅도 할 수 있다(수정이 가능한 사이트도 있으나, 수정이 불가한 사이트가 많다.)
Network	현재 페이지에서 사용하는 통신 정보를 알 수 있다.

 

1. Sources

※ breakpoint 사용 예제

 

2. Network

Network 탭을 켜보면 많은 정보들이 있다.

하나를 클릭하면 Headers Preview Response Initiator Timing 헤더가 있는 탭이 표시 된다.

※ 개인적으로는 Headers, Preview, Response 탭을 확인한다.

탭	확인 영역
Headers	General, Request Headers
Preview	이미지일 경우 해당 파일을 제대로 가져왔는지 확인
Response	응답 정보를 제대로 가져왔는지 확인

 

※ 본인이 프로젝트 파일을 가지고 있는 경우 사용 js, css 파일의 내용을 확인할 수 있기 때문에 해당 element 를 찾아 소스를 확인하고 수정하는 것이 빠르다.