크롬 F12 디버깅 및 소스 분석 방법 / 크롬 개발자도구 사용법

2022-06-22

크롬 F12 디버깅 방법

HTML, Javascript 디버깅

F12 > Sources 탭 > HTML, Javascript 파일 선택 >
소스 좌측 클릭하여 디버그포인트를 걸면 새로고침해도 사라지지 않습니다.
디버그포인트 타서 멈추면, 변수에 마우스 올리거나 Console에서 변수명 입력 시 현재 들어있는 값 확인 가능합니다.

크롬 F12 디버깅 단축키

F8	다음 디버깅 포인트로 이동
F10	다음 단계 또는 다음 줄로 이동

Elements 탭 사용법

HTML 요소 검사

좌측 상단 화살표 > 화면 요소 선택 시 요소의 범위와 적용된 ID, CSS 등을 확인할 수 있습니다.

마우스 Hover 시 나오는 요소 검사
요소에 마우스 올리고 우클릭 후 요소 검사를 하면 됩니다.

HTML 요소 값 변경

HTML 요소 우클릭 > Edit as HTML > 편집 후 포커스를 벗어나면 반영됩니다.

CSS 추가
요소 선택 후 우측 Styles 탭 상단의 + 버튼 선택하고 작성하면 됩니다.

CSS 복사
복사하고 싶은 CSS Selector 우클릭 후 Copy declaration, 붙여넣고 싶은 곳에 Ctrl + V하면 됩니다.
Selector, declaration 모두 복사하고 싶다면 Copy rule 하면 됩니다.

HTML 소스 검색

Ctrl + F > 검색어 입력

Sources 탭 사용법

정적 리소스 분석

좌측 Page 목록에서 파일 선택 > 소스 확인
해당 페이지에 적용된 HTML, CSS, Javascript, 이미지, 폰트 등 정적 리소스들을 볼 수 있습니다.

정적 리소스 전체 검색

Ctrl + Shift + F > 검색어 입력
검색된 소스 줄 선택 시 Sources 탭으로 이동하여 파일 전체 소스 확인 및 변경이 가능합니다.

검색된 파일 위치 찾기
상단 파일명 우클릭 > Reveal in sidebar

Network 탭 사용법

네트워크 정적 리소스 분석

Headers	해당 파일에 대한 HTTP 요청 정보, 요청 헤더, 응답 헤더 값을 확인할 수 있습니다.
Preview	이미지 등 리소스의 모습을 미리보기 할 수 있습니다.
Response	HTML, Javascript 파일 내용을 볼 수 있습니다.
Initiator	해당 파일의 URL 요청 순서가 나옵니다.
Timing	서버 응답 대기 시간, 콘텐츠 다운로드 소요 시간 등을 확인할 수 있습니다.
Cookies	요청 쿠키, 응답 쿠키 키-값을 확인할 수 있습니다.

네트워크 요청 순서대로 정렬된 정적 리소스 파일을 선택하면 볼 수 있는 정보입니다.

Console 탭 사용법

form에 저장된 값 출력

var formElement = document.querySelector('#FormID명');
var formData = new FormData(formElement);

for (var pair of formData.entries()) {
    console.log(pair[0] + ': ' + pair[1]);
}

id로 Form을 찾아서 저장된 모든 entries를 콘솔에 출력하는 스크립트입니다.
디버깅 모드로 브레이크 포인트에 멈추면, 해당 시점의 form 값들을 볼 수 있습니다.

Application 탭 사용법

브라우저에 저장된 값 확인 방법

Local Storage	로컬스토리지는 같은 브라우저 전체에서 공용으로 사용할 수 있습니다. 브라우저를 종료해도 남아있고, 직접 삭제하기 전까지 유지됩니다. 주로 영구적인 데이터 저장에 사용됩니다.
Session Storage	다른 탭은 다른 세션으로 정의하여 세션스토리지 데이터가 공유되지 않습니다. 새로고침 해도 남아있고, 브라우저 탭을 종료하면 삭제됩니다. 임시 데이터를 저장하는 데 유용합니다.
Cookies	쿠키는 4KB 저장 가능하여, 최대 5MB 저장할 수 있는 로컬스토리지보다 용량이 적습니다. 브라우저가 종료되면 사라지는 session 쿠키, 만료일까지 저장되는 Persistent 쿠키가 있습니다. Console 탭에서 document.cookie 입력 시에도 쿠키에 저장된 키-값들 확인 가능합니다. 톰캣 컨테이너에서 세션을 유지하기 위해 발급하는 JSESSIONID도 요청 쿠키에 저장됩니다.

좌측 Storage 메뉴에서 각 스토리지를 선택하면 저장된 값 확인이 가능합니다.

웹 스토리지란?
쿠키보다 큰 문자열을 클라이언트에 저장할 수 있는 저장소이며, 서버가 아닌 Javascript에서만 값을 조작할 수 있습니다.

F12 유용한 기능

브라우저 캐시 삭제 방법

F12 > 좌측 상단 새로고침 아이콘 우클릭 > 캐시 비우기 및 강력 새로고침
소스가 수정되었는데 바로 반영이 안되는 경우, 브라우저 캐시를 지우면 적용이 됩니다.