자바스크립트 디버그

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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

버그 재현

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

  1. 새 탭에서 이 데모를 엽니다.
  2. 숫자 1 상자에 5을 입력합니다.
  3. 숫자 2 상자에 1를 입력합니다.
  4. Add Number 1 and Number 2를 클릭합니다. 버튼 아래의 라벨이 5 + 1 = 51로 표시됩니다. 결과는 6여야 합니다. 이제부터 이 버그를 수정하겠습니다.

5 + 1의 결과가 51입니다. 6이어야 합니다.

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

소스 패널 UI 익히기

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

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

    소스 패널

소스 패널에는 세 가지 섹션이 있습니다.

Sources 패널의 3개 섹션

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

  3. 디버거 섹션 페이지의 JavaScript를 검사하는 다양한 도구입니다.

    DevTools 창이 넓으면 기본적으로 디버거가 Code Editor의 오른쪽에 있습니다. 이 경우 범위 및 시청 탭이 중단점, 호출 스택 등과 함께 접을 수 있는 섹션으로 표시됩니다.

넓은 창의 오른쪽에 있는 디버거

중단점으로 코드 일시중지

이러한 문제를 디버깅하는 흔한 방법은 코드에 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.log() 문에서 검사하고 싶은 각 값을 명시적으로 지정해야 합니다. 중단점을 이용하여 DevTools는 해당 시점의 모든 변수의 값을 보여줍니다. 때때로 본인도 알지 못하는 변수가 코드에 영향을 미치기도 합니다.

정리하면, 중단점은 여러분이 console.log() 메서드보다 더 빠르게 버그를 찾고 수정하는 데 도움을 줍니다.

잠시 시간을 갖고 앱이 어떻게 작동하는지 생각해보면 올바르지 않은 합 (5 + 1 = 51)이 Add Number 1 and Number 2 버튼과 연결된 click 이벤트 리스너에서 계산된다고 추론할 수 있습니다. 따라서 click 리스너가 실행될 때 쯤에 코드를 일시중지하는 것이 좋습니다. 이벤트 리스너 중단점을 사용하면 다음 작업을 할 수 있습니다.

  1. 디버거 섹션에서 Event Listener Breakpoints를 클릭하여 섹션을 펼칩니다. DevTools에 Animation 및 Clipboard와 같은 펼칠 수 있는 이벤트 카테고리의 목록이 표시됩니다.
  2. Mouse 이벤트 카테고리 옆에 있는 Expand를 클릭합니다. DevTools에 click 및 mousedown와 같은 마우스 이벤트 목록이 표시됩니다. 각 이벤트 옆에는 체크박스가 있습니다.

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

    '클릭' 체크박스가 사용 설정되어 있습니다.

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

    function onClick() {

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

이벤트 리스너 중단점은 DevTools에서 이용할 수 있는 여러 중단점 중 하나에 불과합니다. 모든 유형을 살펴보는 것이 좋습니다. 각 유형은 다양한 시나리오에서 가능한 한 빠르게 디버그하는 데 도움을 주기 때문입니다. 중단점을 사용하여 코드 일시중지를 참고하여 각 유형의 사용 시점과 방법을 알아보세요.

코드 단계별 처리

일반적으로 버그는 스크립트를 잘못된 순서로 실행했을 때 발생합니다. 코드를 단계별로 실행하면 코드 실행을 한 번에 한 줄씩 따라가면서 예상과 다른 순서로 실행되는 곳이 어디인지 정확하게 파악할 수 있습니다. 직접 해보기:

  1. DevTools의 Sources 패널에서 다음 함수 호출 Step Into를 클릭하여 onClick() 함수의 실행을 한 번에 한 줄씩 순차 실행합니다. DevTools가 다음 코드 줄을 강조표시합니다.

    if (inputsAreEmpty()) {

  2. 다음 함수 호출 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번째 줄의 코드 줄 중단점에서 일시중지됩니다.

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

변수 값 확인

addend1, addend2, sum의 값이 의심스럽습니다. 앞뒤에 따옴표가 있으니 문자열이라는 뜻입니다. 이것은 버그의 원인을 설명하는 좋은 가설입니다. 이제 정보를 더 많이 모아야 할 때입니다. DevTools은 변수 값을 검사하는 수많은 도구를 제공합니다.

방법 1: 범위 검사

코드 줄에서 일시중지하면 범위 탭에 실행 시 이 시점에서 정의된 로컬 및 전역 변수가 각 변수의 값과 함께 표시됩니다. 가까운 변수가 있는 경우에는 폐쇄 변수도 표시합니다. 코드 줄에서 일시중지하지 않으면 범위 탭이 비어 있습니다.

변수 값을 편집하려면 두 번 클릭합니다.

범위 창

방법 2: 표현식 감시

Watch 탭을 사용하면 시간 경과에 따른 변수 값을 모니터링할 수 있습니다. 시계 보기는 변수에만 국한되지 않습니다. 유효한 JavaScript 표현식은 모두 Watch 탭에 저장할 수 있습니다.

직접 해보기:

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

Watch Expression 창

이 스크린샷은 typeof sum 보기 표현식을 만든 후의 보기 탭 (오른쪽 아래)을 보여줍니다.

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

방법 3: 콘솔

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

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

범위 내 변수를 평가한 후 콘솔 창

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

수정사항 적용

버그 수정 방법을 찾았습니다. 이제 코드를 수정하고 데모를 다시 실행하여 수정사항을 테스트해 보세요. 수정사항을 적용하기 위해 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. 중단점 비활성화를 클릭합니다. 색상이 파란색으로 바뀌어 활성 상태임을 나타냅니다. 이 기능이 설정되면 DevTools가 설정된 중단점을 모두 무시합니다.
  5. 다른 값으로 데모를 테스트합니다. 이제 데모가 올바르게 계산됩니다.

다음 단계

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

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

중단점으로 코드 일시중지를 참고하여 각 유형의 사용 시점과 방법을 알아보세요.

이 가이드에서 설명하지 않은 코드 단계별 실행 제어가 몇 가지 있습니다. 자세한 내용은 코드 줄 단계별 실행을 참고하세요.