====== Chrome Debugging ======


===== 개발자 도구 켜기 =====
  * Mac; ⌘(Command) + ⌥(Option) + I
  * Windows; Ctrl + Shift + I


===== 개발자 도구 기능 =====

^  크롬 개발자 도구 패널  ^^
^  패널  ^  기능  ^
| 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  | 체크한 이벤트가 발생하면 정지   |


===== References =====
  * [[https://subicura.com/2018/02/14/javascript-debugging.html|크롬 개발자 도구를 이용한 자바스크립트 디버깅]]
  * [[https://ooz.co.kr/438|크롬브라우저에서 console.log 로 아무 값도 안찍힐 때..]]
  * [[https://xtring-dev.tistory.com/entry/Chrome-%EA%B0%9C%EB%B0%9C%EC%9E%90-%EC%BD%98%EC%86%94-%EB%8D%94-%EC%9E%98-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0|[Chrome] 개발자 도구 더 잘 사용하기 - 몇 가지 꿀팁 🚀]]