Debugging in the browser (JavaScript)

출처 : https://javascript.info/debugging-chrome

Debugging in the browser

 

브라우저에서 디버깅

더 복잡한 코드를 작성하기 전에 디버깅에 대해 알아봄.

 

디버깅은 스크립트 내에서 오류를 찾아 수정하는 프로세스임.

모든 최신 브라우저와 대부분의 다른 환경은 디버깅 도구를 지원함. 디버깅을 훨씬 더 쉽게 만드는 개발자 도구의 특수 

UI임.

또한 코드를 단계별로 추적하여 정확히 무슨 일이 일어나고 있는지 확인할 수 있음.

 

여기서는 크롬을 사용. 크롬은 충분한 기능을 갖추고 있고 , 다른 대부분 브라우저도 비슷한 프로세스를 거치기 때문임.

 

"소스" 패널

귀하의 chrome 버전은 조금 다르게 보일 수도 있지만 , 여전히 무엇이 들어 있는지 명확히 알 수 있을것임.

 

chrome에서 예제 페이지를 염. 

개발자 도구를 켬. F12 (Mac:) . Cmd + opt + I 

패널을 선택 sources

 

 

처음으로 이 작업을 수행하는 경우 다음 사항을 확인해야 함.

 

 

 

터글러 버튼 파일이 있는 탭을 염.

hello.js 그것을 클릭하고 트리 뷰에서 선택해봄. 다음과 같이 표시되어야 함. : 

 

 

소스 패널은 3개 구분으로 구성이 되어 있음.

1. 파일 탐색기 창엔 HTML , JavaScript , CSS  및 페이지에 첨부된 이미지를 포함한 기타 파일이 나열됨. 

chrome확장 프로그램도 여기에 나타날 수 있음.

 

2. 코드 편집기 창에는 소스코드가 표시됨.

 

3. JavaScript 디버깅 창은 디버깅을 위한 것임. 곧 살펴봄.

 

이제 같은 토글러를 클릭할 수 있음. 

다시 리소스 목록을 숨기고 코드에 공간을 확보함.

 

콘솔 

을 누르면 esc 아래에 콘솔이 열림. 거기에 명령을 입력하고 enter를 눌러 실행할 수 있음.

명령문이 실행된 후의 결과는 아래와 같음.

 

 

예를 들어 다음은 1 + 2결과임. 반면 함수 호출은 hello("debugger") 아무것도 반환하지 않으므로 결과는 undefined가 나옴.

 

중단점

예제 페이지의 코드 내부에서 무슨일이 일어나고 있는지 살펴봄.

hello.js에서  4번 줄을 선택함.  코드에서 클릭하면 안됨.

중단점을 설정하였고 다음과 같이 보이게 됨. (파란색으로 변함)

 

 

 

중단점은 디버거가 JavaScript 실행을 자동으로 일시 중지하는 코드 지점임.

코드가 일시 정지된 동안 현재 변수를 조사하고 콘솔에서 명령을 실행할 수 있음. 

즉 디버깅을 할 수 있음.

오른쪽 패널에서 항상 중단점 목록을 찾을 수 있음. 다양한 파일에 많은 중단점이 있는 경우에 유용함.

 

다음을 수행할 수 있음.

 

코드의 중단점으로 빠르게 이동 ( 오른쪽 패널에서 중단점을 클릭)

중단점의 선택을 해제하여 일시적으로 비활성화 가능

마우스 오른쪽 버튼을 클릭하고 '제거' 를 선택하여 중단점을 제거함.

등등

 

조건부 중단점

 

줄 번호를 마우스 오른쪽 버튼으로 클릭하면 조건부 중단점을 만들 수 있음.

생성 시 제공해야 하는 주어진 표현식이 진실일때만 트리거 됨.

 

이 기능은 특정 변수 값이나 특정 함수 매개변수에 대해서만 중지해야 할 때 유용함.

 

"디버거" 명령

 다음과 같이 debugger   명령을 사용하여 코드를 일시 중지할 수도 있음.

function hello(name) {
  let phrase = `Hello, ${name}!`;

  debugger;  // <-- the debugger stops here

  say(phrase);
}

 

이러한 명령은 개발 도구가 열려있는 경우에만 작동하며 , 그렇지 않으면 브라우저에서 해당 명령이 무시됨.

 

잠시 멈추고 주변을 둘러보기 

 

우리의 예에서 , 페이지 로드 중에 호출되므로 디버거를 활성화하는 가장 쉬운 방법(중단점을 설정한 후)은 페이지를 다시 로드하는 것임. F5 를 눌러 새로고침을 함.

 

 

 

 

오른쪽에 있는 정보 드롭다운을 열어줌

이를 통해 현재 코드 상태를 검토할 수 있음.

 

watch - 모든 표현식에 대한 현재 값을 보여줌.

플러스를 클릭하고 표현식을 입력할 수 있음. 디버거는 값을 표시하고 실행 과정에서 자동으로 다시 계산함. 

 

call stack - 중첩된 호출 체인을 보여줌 .

 

현재 디버거는 hello () 스크립트에서 호출되는  index.html 호출 내부에 있음. (함수가 없으므로 "익명"이라고 함. ) 

스택 항목 ( 예 "익명")을 클릭하면 디버거가 해당 코드로 이동하고 모든 변수도 검사할 수 있음. 

 

scope - 현재 변수

로컬 함수의 로컬 변수를 보여줌. 

소스 바로 위에 강조 표시된 값도 볼 수 있음.

Global (모든 함수에서) 전역 변수가 있음.

 

아직 공부하지 않은 키워드도 있는데 this를 곧 공부함.

 

실행 추적

이제 스크립트를 추적할 시간

오른쪽 패널 상단에 버튼이 있음. 버튼을 눌러봄. 

 

"계속" : 실행을 계속함. 단축키 F8 

실행을 재개함. 추가 중단점이 없으면 실행은 계속되고 디버거는 제어를 잃음.

클릭하면 다음과 같은 화면을 볼 수 있음.

 

 

(마우스로 하이라이트된 부분)

 

실행이 재개되어 내부에서 또 다른 중단점에 도달하여 say() 에서 멈춤. 오른쪽의 "호출 스택"을 살펴보면 알 수 있음.

호출이 하나 더 증가했음. 이제 say() 내부로 들어옴.

 

step : 다음 명령을 실행함. 단축키는 F9

다음 문장을 실행 지금 클릭하면 alert가 표시됨.

이것을 계속 클릭하면 모든 스크립트 문장을 하나씩 차례로 실행함. 

 

 

step over : 다음 명령을 실행하지만 함수로 들어가진 않음. 단축키 F10

 

이전의 "Step" 명령과 유사하지만, 다음 명령문이 함수 호출(alert과 같은 내장 함수가 아니라 우리만의 함수)인 경우 다르게 동작함.

두 명령을 비교해 보면 "step" 명령은 중첩된 함수 호출로 들어가서 첫번째 줄에서 실행을 일시 중지하는 반면 " step over"는 중첩된 함수 호출을 우리에게 보이지 않게 실행하여 함수 내부를 건너 뜀.

 

그러면 해당 함수 호출 직후에 실행이 일시 중지됨.

 

함수 호출 내부에서 무슨 일이 일어나는지 보는데 관심이 없다면 이 방법이 좋음.

 

step into :  이는 "step"과 유사하지만 비동기 함수 호출의 경우 다르게 동작함. JavaScript를 배우기 시작한지 얼마 안되었다면 아직 비동기 호출이 없으므로 차이점을 무시할 수 있음.

앞으로는 "Step" 명령이 나중에 실행되는 setTimeout(예약된 함수 호출)과 같은 비동기 작업을 무시한다는 점에 유의. "Step into"는 필요한 경우 대기하면서 해당 코드로 이동합니다. 자세한 내용은 DevTools 설명서를 참조

 

step out : 단축키 F11

 

현재 함수가 종료될 떄까지 실행한 뒤 , 마지막 줄에서 멈춤.

중첩 호출 안으로 잘못 들어갔을 때 빠르게 빠져나오는데 유용함.

 

모든 중단점 활성화 / 비활성화 (Toggle Breakpoints)

 

실행 위치를 옮기지 않고 설정한 모든 중단점을 일괄적으로 활성화 / 비활성화할 수 있음.

 

오류 발생 시 자동 일시 중지 (pause on Exceptions)

활성화하면 스크립트 실행 중 오류 발생 시 자동으로 디버거가 중지됨.

변수와 컨텍스트를 즉시 확인하여 원인을 파악할 수 있음.

오류가 발생하는 스크립트의 디버깅에 매우 유용함.

 

"여기로 계속 " (Continue to Here)

특정 줄까지 빠르게 이동하고 싶을 떄 중단점을 일일이 설정하지 않고 바로 이동할 수 있음.

코드 줄을 우클릭하여 컨텍스트 메뉴에서 사용함.

 

콘솔 로깅(console Logging)

 

코드를 실행하면서 콘솔에 값을 출력하는 방법

 

for (let i = 0; i < 5; i++) {
  console.log("value,", i);
}

 

디버거 없이도 실행 중인 값과 상태를 손쉽게 확인할 수 있음.

일반 사용자는 브라우저 콘솔을 열지 않으면 볼 수 없음.

개발자는 F12 또는 Esc 키를 통해 개발자 도구의 콘솔 패널에서 확인 가능함.