자바스크립트 디버그

Kayce Basques

Sofia Emelianova

이 튜토리얼에서는 DevTools에서 자바스크립트 문제를 디버깅하기 위한 기본 워크플로를 설명합니다. 이 튜토리얼을 계속 읽거나 이 튜토리얼의 동영상 버전을 시청하세요.

버그 재현

지속적으로 버그를 재현하는 일련의 작업을 찾는 것이 언제나 디버깅의 첫 번째 단계입니다.

1. 새 탭에서 이 데모를 엽니다.
2. Number 1 상자에 5을 입력합니다.
3. Number 2 상자에 1을 입력합니다.
4. 1번과 2번 추가를 클릭합니다. 버튼 아래에 5 + 1 = 51 라벨이 표시됩니다. 결과는 6이어야 합니다. 이제 이 버그를 수정할 것입니다.

이 예에서 5 + 1의 결과는 51입니다. 6이어야 합니다.

소스 패널 UI 익히기

DevTools는 CSS 변경, 페이지 로드 성능 프로파일링, 네트워크 요청 모니터링과 같은 다양한 작업을 위한 여러 가지 도구를 제공합니다. Sources 패널에서 JavaScript를 디버그합니다.

1. DevTools를 열고 Sources 패널로 이동합니다.

   

소스 패널에는 다음과 같은 3개의 섹션이 있습니다.

1. 파일 트리가 있는 페이지 탭 페이지에서 요청하는 모든 파일이 여기에 표시됩니다.
2. 코드 편집기 섹션 페이지 탭에서 파일을 선택하면 해당 파일의 콘텐츠가 여기에 표시됩니다.

3. 디버거 섹션 페이지의 자바스크립트를 검사하는 다양한 도구입니다.

   DevTools 창이 넓으면 기본적으로 디버거가 코드 편집기 오른쪽에 있습니다. 이 경우 Scope 탭과 Watch 탭이 Breakpoints, Call stack 등을 접을 수 있는 섹션으로 조인합니다.

중단점으로 코드 일시중지

이러한 문제를 디버깅하는 일반적인 방법은 코드에 console.log() 문을 많이 삽입하여 스크립트가 실행될 때 값을 검사하는 것입니다. 예를 들면 다음과 같습니다.

function updateLabel() {
  var addend1 = getNumber1();
  console.log('addend1:', addend1);
  var addend2 = getNumber2();
  console.log('addend2:', addend2);
  var sum = addend1 + addend2;
  console.log('sum:', sum);
  label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}

console.log() 메서드로 작업을 완료할 수도 있지만 중단점으로 더 빠르게 작업을 처리할 수 있습니다. 중단점을 사용하면 실행 도중에 코드를 일시 중지하고 해당 시점의 모든 값을 검사할 수 있습니다. 중단점에는 console.log() 메서드에 비해 몇 가지 이점이 있습니다.

• console.log()의 경우 Console에서 메시지를 보려면 수동으로 소스 코드를 열고 관련 코드를 찾고 console.log() 문을 삽입한 후 페이지를 새로고침해야 합니다. 중단점을 사용하면 코드의 구조를 모르더라도 관련 코드에서 일시중지할 수 있습니다.
• console.log() 문에서 검사하려는 각 값을 명시적으로 지정해야 합니다. 중단점을 통해 DevTools는 특정 시점의 모든 변수의 값을 표시합니다. 때때로 본인도 알지 못하는 변수가 코드에 영향을 미칩니다.

간단히 말해 중단점을 사용하면 console.log() 메서드보다 더 빠르게 버그를 찾아 수정할 수 있습니다.

한 걸음 물러서서 앱이 어떻게 작동하는지 생각해보면 Add Number 1 and Number 2 버튼에 연결된 click 이벤트 리스너에서 잘못된 합계 (5 + 1 = 51)가 계산될 것이라고 추측할 수 있습니다. 따라서 click 리스너가 실행되는 시점에 코드를 일시중지하는 것이 좋습니다. 이벤트 리스너 중단점을 사용하면 바로 이러한 작업을 할 수 있습니다.

1. Debugger 섹션에서 Event Listener Breakpoints를 클릭하여 섹션을 펼칩니다. DevTools에 애니메이션 및 클립보드와 같은 펼칠 수 있는 이벤트 카테고리 목록이 표시됩니다.
2. 마우스 이벤트 카테고리 옆에 있는 arrow_right 펼치기를 클릭합니다. DevTools에 click 및 mousedown과 같은 마우스 이벤트 목록이 표시됩니다. 각 이벤트 옆에는 체크박스가 있습니다.

3. 클릭 체크박스를 선택합니다. 이제 DevTools가 임의의 click 이벤트 리스너가 실행될 때 자동으로 일시중지되도록 설정되었습니다.

   

4. 데모로 돌아가서 Add Number 1 and Number 2를 다시 클릭합니다. DevTools가 데모를 일시중지하고 Sources 패널의 코드 줄을 강조표시합니다. DevTools는 다음 코드 줄에서 일시중지해야 합니다.

   function onClick() {
   

   다른 코드 줄에서 일시중지했다면 올바른 줄에서 일시중지될 때까지 Resume 스크립트 실행 재개를 누릅니다.

이벤트 리스너 중단점은 DevTools에서 사용할 수 있는 여러 중단점 유형 중 하나일 뿐입니다. 각 유형은 다양한 시나리오를 최대한 빠르게 디버그하는 데 도움이 되므로 다양한 유형을 모두 살펴보는 것이 좋습니다. 각 유형을 언제 어떻게 사용하는지 알아보려면 중단점으로 코드 일시중지를 참고하세요.

단계별 코드 실행

버그가 발생하는 일반적인 원인 중 하나는 스크립트가 잘못된 순서로 실행되는 경우입니다. 코드를 단계별로 실행하면 코드 실행을 한 번에 한 줄씩 살펴보고 정확히 예상한 것과 다른 순서로 실행되는 위치를 파악할 수 있습니다. 직접 해보기:

1. DevTools의 Sources 패널에서 step_into Step into next function call을 클릭하여 onClick() 함수를 한 번에 한 줄씩 단계별로 실행합니다. DevTools에서 다음 코드 줄을 강조표시합니다.

   if (inputsAreEmpty()) {
   

2. step_over 다음 함수 호출 Step Over를 클릭합니다.

   DevTools가 Step Into하지 않고 inputsAreEmpty()를 실행합니다. DevTools가 어떻게 몇 줄의 코드를 건너뛰는지 살펴보세요. 이는 inputsAreEmpty()가 false로 평가되어 if 문의 코드 블록이 실행되지 않았기 때문입니다.

이것이 코드 단계별 실행의 기본 개념입니다. get-started.js의 코드를 살펴보면 버그가 updateLabel() 함수 어딘가에 있다는 것을 알 수 있습니다. 모든 코드 줄을 단계별로 실행하지 않고 다른 유형의 중단점을 사용하여 버그 위치에 가까운 곳에서 코드를 일시중지할 수 있습니다.

코드 줄 중단점 설정

코드 줄 중단점은 가장 일반적인 유형의 중단점입니다. 일시중지하고 싶은 특정 코드 줄이 있다면 코드 줄 중단점을 사용합니다.

1. updateLabel()에서 마지막 코드 줄을 확인합니다.

   label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
   

2. 코드 왼쪽에 이 특정 코드 줄의 줄 번호(32)가 있습니다. 32를 클릭합니다. DevTools에서 32 상단에 파란색 아이콘을 표시합니다. 즉, 이 줄에 코드 줄 중단점이 있습니다. 이제 DevTools는 이 코드 줄이 실행되기 전에 항상 일시 중지합니다.

3. 재개 스크립트 실행 재개를 클릭합니다. 스크립트는 32행에 도달할 때까지 계속 실행됩니다. 29, 30, 31행에서 DevTools가 addend1, addend2, sum의 값을 인라인으로 선언 옆에 표시합니다.

이 예에서 DevTools는 32번 줄의 코드 줄 중단점에서 일시 중지합니다.

변수 값 확인

addend1, addend2, sum 값이 의심스러워 보입니다. 따옴표로 묶여 문자열이라는 의미입니다 이것은 버그의 원인을 설명하는 좋은 가설입니다. 이제 더 많은 정보를 수집할 차례입니다. DevTools는 변수 값을 검사하는 다양한 도구를 제공합니다.

방법 1: 범위 검사

코드 줄에서 일시중지하면 Scope 탭에 실행 시점에 정의된 로컬 및 전역 변수가 각 변수의 값과 함께 표시됩니다. 가능한 경우 클로저 변수도 표시합니다. 코드 줄에서 일시중지하지 않았다면 Scope 탭이 비어 있습니다.

변수 값을 더블클릭하여 수정합니다.

메서드 2: 감시 표현식

Watch(조사식) 탭에서는 시간 경과에 따른 변수 값을 모니터링할 수 있습니다. Watch는 변수에만 국한되지 않습니다. Watch 탭에는 유효한 자바스크립트 표현식을 저장할 수 있습니다.

직접 해보기:

1. 보기 탭을 클릭합니다.
2. add 감시 표현식 추가를 클릭합니다.
3. typeof sum를 입력합니다.
4. Enter를 누릅니다. DevTools에 typeof sum: "string"가 표시됩니다. 콜론 오른쪽의 값은 표현식의 결과입니다.

이 스크린샷은 typeof sum 감시 표현식을 만든 후의 Watch 탭 (오른쪽 하단)을 보여줍니다.

sum가 숫자여야 하는데 문자열로 평가되고 있습니다. 이제 이것이 버그의 원인임을 확인했습니다.

방법 3: 콘솔

Console을 사용하여 console.log() 메시지를 보는 것 외에도 임의의 JavaScript 문을 평가할 수도 있습니다. 디버깅의 경우 Console을 사용하여 버그의 잠재적 수정사항을 테스트할 수 있습니다. 직접 해보기:

1. Console 창이 열려 있지 않으면 Esc를 눌러 엽니다. DevTools 창 하단에서 열립니다.
2. Console에서 parseInt(addend1) + parseInt(addend2)를 입력합니다. 이 문은 addend1 및 addend2가 범위 내에 있는 코드 줄에서 일시중지되었기 때문에 작동합니다.
3. Enter를 누릅니다. DevTools가 명령문을 평가하고 6를 출력합니다. 이 값은 데모에서 생성할 것으로 예상되는 결과입니다.

이 스크린샷은 parseInt(addend1) + parseInt(addend2)를 평가한 후의 Console 창을 보여줍니다.

수정사항 적용

버그의 수정사항을 찾았습니다. 이제 코드를 수정하고 데모를 다시 실행하여 해결 방법을 시도해 보기만 하면 됩니다. 수정사항을 적용하기 위해 DevTools를 나가지 않아도 됩니다. DevTools UI 내에서 직접 JavaScript 코드를 수정할 수 있습니다. 직접 해보기:

1. 재개 스크립트 실행 재개를 클릭합니다.
2. 코드 편집기에서 31행 var sum = addend1 + addend2을 var sum = parseInt(addend1) + parseInt(addend2)로 바꿉니다.
3. Command + S (Mac) 또는 Control + S (Windows, Linux)를 눌러 변경사항을 저장합니다.
4. label_off 중단점 비활성화를 클릭합니다. 색상이 파란색으로 바뀌어 활성 상태임을 나타냅니다. 이렇게 설정되면 DevTools는 설정된 중단점을 무시합니다.
5. 다른 값으로 데모를 사용해 보세요. 이제 데모가 올바르게 계산됩니다.

다음 단계

이 튜토리얼에서는 중단점을 설정하는 두 가지 방법만 보여주었습니다. DevTools는 다음을 포함한 여러 가지 방법을 제공합니다.

• 제공한 조건이 true일 때만 트리거되는 조건부 중단점
• 포착/미포착 예외의 중단점
• 요청된 URL이 제공된 하위 문자열과 일치할 때 트리거되는 XHR 중단점입니다.

각 유형을 사용하는 시점과 방법을 알아보려면 중단점이 있는 코드 일시중지를 참고하세요.

이 튜토리얼에서 설명하지 않은 코드 단계별 실행 컨트롤이 몇 가지 있습니다. 자세한 내용은 코드 줄 Step Over를 참고하세요.