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

2022-06-22

크롬 개발자 도구 사용법

크롬 개발자 도구 실행 방법

F12 (단축키)
크롬 우측 상단 점 3개 > 도구 더보기 > 개발자 도구
크롬 브라우저 우클릭 > 검사

개발자 도구 위치 변경

F12 > 우측 상단 점 3개 > Dock side: 팝업창/좌측/하단/우측 중 선택

개발자 도구 언어 변경

F12 > 우측 상단 설정 아이콘 > Preferences 메뉴 > Language: English (US) - English (US) 또는 Korean - 한국어 선택 > 우측 상단 X 버튼으로 닫기 > 상단 Reload DevTools 버튼 클릭
또는
F12 > 우측 상단 점 3개 > Run Command > english (US) 또는 korean 입력 및 선택 > 상단 Reload DevTools 버튼 클릭

브라우저 캐시 삭제 방법

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

F12 눈금자 활성화 방법

F12 > 우측 상단 점 3개 > Run Command > Show rulers on hover 입력 및 선택 > HTML 요소에 마우스를 올리면 화면 가로, 세로 라인에 눈금자가 표시됩니다.
눈금자 비활성화 시에는 Do not show rulers on hover 입력 및 선택하면 됩니다.

Javascript 비활성화

F12 > 우측 상단 점 3개 > Run command > javascript 검색 > Disable JavaScript 선택
또는
F12 > 우측 상단 설정 아이콘 > Preferences 메뉴 > 우측 하단 Debugger : Disable JavScript 체크
Javascript 비활성화가 적용되면 Sources 탭 경고표시를 확인할 수 있습니다.
슬라이드 배너 등 움직이는 HTML 요소 분석 시, 잠시 화면을 멈출 수 있는 방법입니다.

Elements 탭 사용법

HTML 요소 검사 방법

F12 > Elements 탭 > HTML DOM 요소 마우스 호버 시 요소의 범위와 적용된 ID, CSS 등을 확인할 수 있습니다.
좌측 상단 화살표 아이콘 클릭 (Ctrl + Shift + C) > 화면 요소 마우스 호버 시에도 동일한 기능을 합니다.
화면 요소에서 마우스 우클릭 후 검사를 클릭하면 Elements 탭에서 해당 요소가 자동 포커스 됩니다.

HTML 요소 CSS 분석 방법

우측 Styles 탭 기능

Elements 탭 좌측에서 선택된 요소에 적용된 모든 CSS가 나타납니다.
CSS 우측 파일명을 클릭하면 해당 CSS가 작성된 위치로 이동하여 전체 코드를 확인할 수 있습니다.
파일명 부분에 user agent stylesheet라고 나오면, 브라우저에서 기본적으로 제공되는 스타일입니다.

Styles 탭 우측 상단 Show Computed Styles sidebar 아이콘을 클릭하면,
Styles 탭 우측에 Computed 패널이 함께 표시되어, 최종 적용된 CSS를 확인하기 편합니다.

우측 Computed 탭 기능
상단 Box Model 섹션에서 요소에 적용된 margin, border, padding, 요소 크기를 시각적으로 확인할 수 있습니다.
각 수치 더블클릭 시 원하는 값으로 변경할 수 있어 편리합니다.

하단에는 우선순위에 의해 최종적으로 해당 요소에 적용된 CSS 목록을 노출합니다.
우측 Group 체크박스 체크 시, CSS 속성들이 카테고리별로 정리되어 보기가 편해집니다.
각 CSS 속성 좌측 ▶ 화살표 선택 시 CSS 속성 값, 해당 CSS가 적용된 요소, CSS가 작성된 파일명을 확인할 수 있습니다.
각 CSS 속성 하위 목록은 우선순위 높은 순으로 정렬되기 때문에 1번째 값이 요소에 실제 적용된 CSS 값입니다.
CSS 속성 값 좌측 화살표를 클릭하면 Styles 탭에서 해당 CSS 규칙 위치로 자동 포커스 됩니다.

HTML 요소 위치로 화면 이동

HTML 요소 좌측 점 3개 > Scroll into view

HTML 요소 수정

Elements 탭에서 HTML 요소 수정 시 저장되지 않으며, 새로고침하면 날아갑니다.

HTML 요소 값 변경 HTML 요소에서 수정하고 싶은 부분 더블클릭 > 수정 > 엔터
또는
HTML 요소 우클릭 > Edit as HTML > 편집 후 포커스를 벗어나면 반영됩니다.
Ctrl + Z 단축키로 수정된 것을 취소할 수 있습니다.

HTML 요소 속성 추가
HTML 요소 우클릭 > add attribute > 속성명=”값” 입력 > 엔터

HTML 요소 위치 변경
HTML 요소 클릭 및 드래그 > 원하는 HTML 요소 위치로 이동

HTML 요소 숨기기
HTML 요소 클릭 > H visibility: hidden !important; CSS가 적용되어 화면에서 숨겨집니다.
다시 H를 누르면, 요소가 다시 보여집니다.

HTML 요소 CSS 수정

Elements 탭에서 HTML 요소 CSS 수정 시 저장되지 않으며, 새로고침하면 날아갑니다.

CSS 활성화/비활성화
HTML 요소 클릭 > 우측 Styles 탭 > 적용된 CSS 좌측 체크박스로 ON/OFF 가능

CSS 속성 값 수정
HTML 요소 클릭 > 우측 Styles 탭 > 적용된 CSS 속성 값 클릭 > 수정 > 엔터

CSS 규칙 추가
HTML 요소 클릭 > 우측 Styles 탭 상단 + 버튼 클릭 > 추가된 CSS 규칙 선택자명 수정 > CSS 속성 입력

CSS 속성 추가
HTML 요소 클릭 > 우측 Styles 탭 > 상단 element.style 규칙 클릭 > 인라인 CSS 작성
또는
HTML 요소 클릭 > 우측 Styles 탭 > 적용된 CSS 속성 우측 여백 클릭 > 속성명: 속성값 작성 > 엔터

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

CSS 색상 선택 도구 열기

HTML 요소 클릭 > 우측 Styles 탭 > color 등 색상 관련 CSS 속성 값 왼쪽 네모 클릭 > 색상 선택 도구 활성화
색상 선택 도구에서 HTML 요소 CSS 색상 변경 가능합니다.
해당 요소가 Contrast ratio (명도 대비율) 4.5:1 이상으로 접근성 기준을 충족하는지도 확인 가능합니다.

화면 CSS 색상 추출
색상 선택 도구에서 좌측 스포이드 클릭 > HTML 요소 또는 컴퓨터 화면 내 요소 클릭 > #f7bc21 등 색상 헥스코드 추출 가능
헥스코드 우측 화살표 클릭하면, rgb 등 다른 색상 표기법으로도 변경할 수 있습니다.

가상 클래스 확인 및 적용

요소 상태 클래스 적용
HTML 요소 클릭 > 우측 Styles 탭 > 상단 Filter 우측 :hov 클릭 > 체크박스로 :active, :hover, :focus, :focus-within, :focus-visible, :target 등 요소 상태 클래스 적용 및 해제 가능

요소 클래스 추가
HTML 요소 클릭 > 우측 Styles 탭 > 상단 Filter 우측 :cls 클릭 > 요소에 적용할 클래스명 입력 > 엔터 > 체크박스로 클래스 적용 및 해제 가능

HTML 소스 검색

Ctrl + F > 검색어 입력

스크롤 화면 캡쳐

F12 > Elements 탭 > 우측 상단 점 3개 > Run command (Ctrl + Chift + P) > screenshot 검색 > Capture full size screenshot 선택 > 다운로드 폴더에 저장된 웹 페이지 전체화면 캡처 이미지 확인
크롬 F12 개발자 도구가 새 창 모드로 열려있어야 합니다.

Console 탭 사용법

콘솔에서 메시지를 출력하거나, javascript 코드를 실행할 수 있습니다.

콘솔 메시지 종류

console.log()	일반 메시지 출력
console.info()	정보 메시지 출력
console.debug()	디버그 메시지 출력 Console 탭 상단 우측 Default levels 클릭 > Verbose 선택 시 확인 가능
console.warn()	노란색 경고 메시지 출력
console.error()	빨간색 오류 메시지 출력
console.table(배열 또는 객체) console.table(배열 또는 객체, 컬럼명)	배열 또는 객체를 테이블 형태로 출력
console.time("레이블") Javascript 코드 실행 console.timeEnd("레이블")	타이머 실행 후 중지 시 소요시간 출력 레이블로 여러 타이머 구분 가능

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 값들을 볼 수 있습니다.

실시간 표현식 생성

Console 탭 상단 좌측 눈 모양 아이콘 클릭 > Javascript 표현식 입력 > 엔터
입력한 표현식의 현재 값이 자동 갱신되어, Javascript 변수 값 등 확인이 가능합니다.

Sources 탭 사용법

정적 리소스 분석 및 수정

좌측 Page 목록에서 파일 선택 > 우측 코드 편집기에서 소스 확인 > 코드 수정 > Ctrl + S (저장)
해당 페이지에 적용된 HTML, CSS, Javascript, 이미지, 폰트 등 정적 리소스들을 볼 수 있습니다.

정적 리소스 전체 검색

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

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

크롬 디버깅 방법

F12 > Sources 탭 > HTML 또는 Javascript 파일 선택 > 브레이크 포인트 생성 > 이벤트 발생
디버그포인트에서 멈추면, 변수에 마우스 올리거나 Console에서 변수명을 입력하여 현재 들어있는 값 확인이 가능합니다.

브레이크 포인트 생성 방법

코드 편집기에서 실행되지 않고 멈추길 원하는 코드 좌측 클릭
코드 편집기에서 실행되지 않고 멈추길 원하는 코드 위 debugger; 작성 > Ctrl + S (저장)
우측 Event Listener Breakpoints > Mouse > click 체크 (모든 마우스 클릭 이벤트 발생 시 일시중지)

크롬 디버깅 단축키

F8	코드 계속 실행, 다음 브레이크 포인트에서 멈춤
F10	함수 내부로 진입 없이, 다음 줄로 이동
F11	함수 내부로 진입
Shift + F11	현재 함수 실행을 마치고, 호출부 (상위 함수) 로 이동
Ctrl + F8	지정한 모든 브레이크 포인트 활성화/비활성화

Application 탭 사용법

브라우저에 저장된 데이터 확인 방법

F12 > Application 탭 > 좌측 Storage 메뉴 > 스토리지 선택 > 데이터가 저장된 도메인 선택 > 우측 영역에서 키-값 데이터 확인 및 수정 가능

브라우저 스토리지 종류

Local Storage	로컬 스토리지는 같은 Origin의 모든 탭에서 공용으로 사용할 수 있습니다. 브라우저를 종료해도 남아있고, 직접 삭제하기 전까지 유지됩니다. 주로 영구적인 데이터 저장에 사용되며, Origin 당 최대 5MB까지 저장할 수 있습니다.
Session Storage	다른 탭은 다른 세션으로 정의하여 세션 스토리지 데이터가 공유되지 않습니다. 새로고침 해도 남아있고, 브라우저 탭을 종료하면 삭제됩니다. 임시 데이터를 저장하는 데 유용합니다.

웹 스토리지는 데이터가 key-value 쌍으로 저장되고, Javascript로만 값을 조작할 수 있습니다.
쿠키와 달리, 서버 요청 시마다 서버로 자동 전송되지 않습니다.
좌측 Storage 메뉴에서 각 스토리지를 선택하면 저장된 값 확인이 가능합니다.

클라이언트 HTTP 상태 관리 방식

브라우저가 종료되면 사라지는 session 쿠키, 만료일까지 저장되는 Persistent 쿠키가 있습니다.
톰캣 컨테이너에서 세션을 유지하기 위해 발급하는 JSESSIONID도 요청 쿠키에 저장됩니다.
서버 요청 시마다 쿠키가 HTTP 요청 헤더에 포함되어 서버로 자동 전송됩니다.

서버 HTTP 상태 관리 방식

Session

세션은 서버에 저장되며, 로그인 상태 유지 시 주로 사용됩니다.
브라우저가 종료되거나 서버에서 삭제하면 제거됩니다.
데이터가 서버에 저장되고, 클라이언트에는 세션ID만 전달되어 쿠키보다 안전합니다.
서버 자원을 사용해서 서버 부하가 커질 수 있다는 단점이 있습니다.

세션은 클라이언트와 서버 간 상태 정보를 유지하기 위한 방법 중 하나입니다.

모바일 디바이스 모드

F12 > 좌측 상단 Toggle device toolbar 버튼 (Ctrl + Shift + M)

디바이스 모드 화면 사이즈 변경 방법

상단 가로x세로 사이즈 입력
우측 및 하단 사이즈 변경 바 드래그
상단 좌측 기기명 선택 > Edit > Custom devices 추가 또는 원하는 기기명 체크
상단 우측 회전 버튼 선택 (세로모드/가로모드 전환)
상단 가로x세로 사이즈 입력 바 하단 기준점 클릭 (모바일/태블릿/노트북 사이즈 전환)

F12 성능 관련 탭 사용법

https://0songha0.github.io/it-tip/2022-06-22-2
Network 탭, Performance 탭, Lighthouse 탭 사용법 글입니다.