자바스크립트 디버그

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

1단계: 버그 재현

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

1. 새 탭에서 이 데모를 엽니다.
2. 숫자 1 텍스트 상자에 5을 입력합니다.
3. 숫자 2 텍스트 상자에 1를 입력합니다.
4. 1번과 2번 추가를 클릭합니다. 버튼 아래의 라벨은 5 + 1 = 51입니다. 결과는 6이어야 합니다. 앞으로 수정할 버그입니다.

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

2단계: 소스 패널 UI 익히기

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

1. Command+Option+J (Mac) 또는 Control+Shift+J (Windows, Linux)를 눌러 DevTools를 엽니다. 이 단축키를 사용하면 콘솔 패널이 열립니다.

   

2. 소스 탭을 클릭합니다.

   

소스 패널 UI는 3가지 부분으로 구성됩니다.

1. File Navigator 창. 페이지에서 요청하는 모든 파일이 여기에 표시됩니다.
2. Code Editor 창 File Navigator 창에서 파일을 선택하면 해당 파일의 콘텐츠가 여기에 표시됩니다.
3. JavaScript Debugging 창 페이지의 자바스크립트를 검사하는 다양한 도구입니다. DevTools 창이 넓으면 이 창이 Code Editor 창의 오른쪽에 표시됩니다.

3단계: 중단점으로 코드 일시중지

이러한 문제를 디버깅하는 일반적인 방법은 코드에 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.log() 문을 삽입한 다음 페이지를 새로고침해야 Console에 메시지가 표시됩니다. 중단점을 사용하면 코드의 구조를 모르더라도 관련 코드에서 일시중지할 수 있습니다.
• console.log() 문에서 검사하려는 각 값을 명시적으로 지정해야 합니다. 중단점을 통해 DevTools는 해당 시점의 모든 변수의 값을 보여줍니다. 때때로 본인도 모르는 사이에 코드에 영향을 주는 변수가 있을 수 있습니다.

간단히 말해 중단점은 console.log() 메서드보다 더 빠르게 버그를 찾아 수정하는 데 도움이 됩니다.

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

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

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

   

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

   function onClick() {
   

   다른 코드 줄에서 일시중지한 경우 올바른 줄에서 일시중지될 때까지 Resume Script Execution 을 누릅니다.

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

4단계: 단계별 코드 실행

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

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

   if (inputsAreEmpty()) {
   

2. Step Over next function call 을 클릭합니다. DevTools가 Step Into하지 않고 inputsAreEmpty()를 실행합니다. DevTools가 어떻게 코드를 몇 줄 건너뛰는지 확인하세요 이는 inputsAreEmpty()가 false로 평가되어 if 문의 코드 블록이 실행되지 않았기 때문입니다.

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

5단계: 코드 줄 중단점 설정

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

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

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

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

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

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

6단계: 변수 값 확인

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

방법 1: 범위 창

코드 줄에서 일시중지하면 Scope 창에 현재 정의된 로컬 및 전역 변수가 각 변수의 값과 함께 표시됩니다. 해당하는 경우 클로저 변수도 표시합니다. 변수 값을 더블클릭하여 수정합니다. 코드 줄에서 일시중지하지 않았다면 Scope 창이 비어 있습니다.

메서드 2: Watch Expressions

Watch Expressions 탭을 사용하면 시간 경과에 따른 변수 값을 모니터링할 수 있습니다. 이름에서 알 수 있듯이 Watch Expressions는 변수로만 제한되지 않습니다. Watch 표현식에 유효한 JavaScript 표현식을 저장할 수 있습니다. 직접 해보기:

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

위의 스크린샷은 typeof sum 감시 표현식을 만든 후의 Watch Expression 창 (오른쪽 하단)을 보여줍니다. DevTools 창이 큰 경우에는 Watch Expression 창이 오른쪽의 Event Listener Breakpoints 창 위에 있습니다.

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

방법 3: 콘솔

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

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

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

7단계: 수정사항 적용하기

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

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

다음 단계

수고하셨습니다 이제 자바스크립트를 디버깅할 때 Chrome DevTools를 최대한 활용하는 방법을 알게 되었습니다. 이 튜토리얼에서 배운 도구와 메서드를 사용하면 수많은 시간을 절약할 수 있습니다.

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

• 제공한 조건이 true인 경우에만 트리거되는 조건부 중단점
• 포착되거나 포착되지 않은 예외의 중단점.
• 요청된 URL이 제공된 하위 문자열과 일치할 때 트리거되는 XHR 중단점

각 유형을 언제 어떻게 사용하는지 알아보려면 중단점으로 코드 일시중지를 참고하세요.

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