Chrome Debugging

크롬 개발자 도구 패널
패널	기능
Elements	HTML 요소와 CSS 스타일의 확인과 편집, DOM 브레이크 포인트 설정, 이벤트 리스너 확인
Console	커맨드 라인을 이용한 웹 브라우저의 조작, 브라우저 로그의 모니터링
Source	자바스크립트 코드와 CSS 코드의 디버깅
Network	네트워크 작업(HTTP 요청, 쿠키, 웹 소켓)의 기록과 모니터링
Performance	렌더링 성능 및 자바스크립트 함수의 실행과 처리에 걸리는 시각을 기록하여 측정
Memory	사용 중인 힙 메모리의 모니터링 및 기록
Application	웹 페이지를 구성하는 리소스스 파일(IndexedDB, Web SQL, 쿠키, 애플리케이션 캐시, 웹 스토리지(Web Storage))의 확인과 편집, 프로그레시브 웹 관련 검증(서비스 워커 포함)
Security	HTTPS 연결 상태의 확인(SSL 인증서의 유효성, SSL 연결의 안전성, 자원의 보안성 검사)
Audits	웹 페이지 성능과 네트워크에 관련된 개선 사항은 조사하고 제안하기

Source 패널 사용
- 네비게이터: 페이지의 소스 파일 목록 표시
- 소스 뷰; 선택한 소스의 내용 표시
- PRETTY-PRINT 버튼; 선택된 소스 코드의 가독성을 높임
- 사이드 바; 디버깅 정보 표시. 컨트롤 버튼과 여러 개의 페인으로 구성

소스 선택
문자 찾기 및 바꾸기; Ctrl + F(Windows), ⌘(Command) + F(mac) 찾기.
코드의 가독성 향상; Pretty-print 버튼 ({})
브레이크 포인트 설정;
- 일시적으로 정지시킬 위치에 debugger 문장을 직접 소스 코드에 작성; if (i > 5 ) debugger;
- 소스 뷰에서 일시적으로 정지시킬 소스 코드의 왼쪽 행 번호 부분을 클릭하여 설정
브레이크 포인트의 정지 조건 설정; 브레이크 포인트 행, 마우스 오른쪽 버튼 클릭 시 컨텍스트 메뉴 → Edit Breakpint …
변수에 저장된 값 표시
- 변수 위에 마우스 커서를 올림
- 사이드 바의 watch 페인에 있는 +(플러스) 버튼을 눌러 값을 표시할 변수 이름을 입력
프로그램의 실행 흐름 제어
- 처리 재개/일시 정지
- 스텝 오버; 코드를 한 줄씩 실행. 함수는 한 줄로 간주
- 스텝 인; 코드를 한 줄씩 실행. 함수를 호출하면 함수 내부로.
- 스텝 아웃; 실행 중인 함수 처리를 끝낸 후 호출한 함수로 이동
- 브레이크 포인트 무효화; 모든 브레이크 포인트 무효화 토글
- 예외가 발생핬을 때 일시 정지; 예외가 발생했을 때 일시 정지할지 말지 여부 설정
- 비동기 디버깅 활성화(Async); 비동기 디버깅 활성. 활성시ㅣ Call stack 페인으로 비동기 호출의 전체 콜 스택을 볼 수 있다.
실행 중에 변수 값 변경
- 사이드 바 페인

사이드 바에 있는 각 페인의 기능
페인	기능
Watch	표현식 또는 변수를 등록하면 실행 중일 때 값이 표시. + 버튼으로 표현식 또는 변수 등록 가능.
Call Stack	콜 스택이 표시. 어떤 함수가 호출했는지 알수 있다.
Scope	실행 중인 코드의 유효 범위 안에 있는 변수 값을 보고 변경 가능.
Breakpoints	브레이크 포인트가 설정된 위치 표시
XHR Breakpoints	XMLHttpRequest의 send 메서드를 실행할 때 정지하는 브레이크 포인트. + 버튼을 누르면 요청을 전송할 URL 설정 가능.
DOM Breakpoints	Elements 패널에서 DOM 요소에 설정한 브레이크 포인트 표시.
Global Listeners	전역 객체(window)에 등록된 이벤트 처리기와 이벤트 리스너의 목록 표시.
Event Listener Breakpoints	체크한 이벤트가 발생하면 정지

개발자 도구 켜기