자바스크립트 디버그

Kayce Basques

Sofia Emelianova

이 튜토리얼에서는 DevTools에서 JavaScript 문제를 디버깅하기 위한 기본 워크플로를 알려줍니다. 읽기 동영상을 시청하거나 이 튜토리얼의 동영상 버전을 시청하세요.

버그 재현

항상 버그를 일관되게 재현하는 일련의 작업을 찾는 것이 디버깅할 수 있습니다.

1. 새 탭에서 이 데모를 엽니다.
2. Number 1(숫자 1) 상자에 5을 입력합니다.
3. Number 2(숫자 2) 상자에 1을 입력합니다.
4. Add Number 1 and Number 2를 클릭합니다. 버튼 아래의 라벨은 5 + 1 = 51입니다. 결과 6이어야 합니다. 이 버그를 수정할 예정입니다.

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

소스 패널 UI 익히기

DevTools는 CSS 변경, 프로파일링 페이지 등 다양한 작업을 위한 다양한 도구를 제공합니다. 부하 성능 및 네트워크 요청 모니터링을 살펴보겠습니다 Sources 패널에서는 디버그 있습니다.

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

   

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

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

3. Debugger 섹션 페이지의 JavaScript를 검사하기 위한 다양한 도구입니다.

   DevTools 창이 넓다면 기본적으로 Debugger는 코드 편집기의 오른쪽에 있습니다. 이 경우 범위 및 조회 탭이 중단점, 호출 스택 및 기타 항목을 접을 수 있는 섹션으로 결합합니다.

중단점으로 코드 일시중지

이러한 문제를 디버깅하는 일반적인 방법은 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)가 click 이벤트 리스너에서 계산되어 Add Number 1 and Number 2 버튼: 따라서 Cloud Shell을 종료하기 직전에 코드를 click 리스너가 실행합니다. 이벤트 리스너 중단점을 사용하면 바로 이 작업을 수행할 수 있습니다.

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

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

   

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

   function onClick() {
   

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

이벤트 리스너 중단점은 DevTools에서 사용할 수 있는 여러 중단점 유형 중 하나일 뿐입니다. 그것은 각 유형은 궁극적으로 서로 다른 여러 유형을 디버그하는 데 도움이 되므로 최대한 빠르게 이루어진다는 뜻입니다 중단점으로 코드 일시중지를 참고하여 언제 어떻게 각 유형을 사용합니다

단계별 코드 실행

버그의 일반적인 원인 중 하나는 스크립트가 잘못된 순서로 실행되기 때문입니다. 단계별 코드 실행 한 번에 한 줄씩 코드 실행을 살펴보고 생각한 것과 다른 순서로 실행됩니다 직접 해보기:

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

   if (inputsAreEmpty()) {
   

2. step_over Step over next function call을 클릭합니다.

   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: 범위 검사

코드 줄에서 일시중지되면 범위 탭에 어떤 로컬 및 전역 변수가 표시되는지 각 변수의 값과 함께 실행 시점에서 정의됩니다. 또한 닫는 변수가 표시됩니다. 있습니다. 코드 줄에서 일시중지하지 않으면 범위 탭은 비어 있습니다.

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

방법 2: 감시 표현식

조사 탭에서는 시간 경과에 따른 변수 값을 모니터링할 수 있습니다. Watch는 변수에만 국한되지 않습니다. 유효한 JavaScript나 표현식을 감시할 수 있습니다.

직접 해보기:

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

이 스크린샷은 typeof sum 시계를 만든 후의 Watch 탭 (오른쪽 하단)을 보여줍니다. 사용할 수 있습니다.

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

방법 3: Console

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

1. 콘솔 창이 열려 있지 않으면 Esc 키를 눌러 엽니다. 그러면 DevTools 창에 표시됩니다.
2. 콘솔에서 parseInt(addend1) + parseInt(addend2)를 입력합니다. 이 문장은 다음과 같은 이유로 효과적입니다. addend1 및 addend2가 범위 내에 있는 코드 줄에서 일시중지됩니다.
3. Enter를 누릅니다. DevTools가 문을 평가하고 예상한 결과인 6를 출력합니다. 살펴보겠습니다

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

수정사항 적용

버그의 수정사항을 찾았습니다. 이제 코드를 수정하고 데모를 다시 실행해 보겠습니다 수정 사항을 적용하기 위해 DevTools를 종료하지 않아도 됩니다. 자바스크립트 코드를 수정할 수 있습니다. 바로 사용할 수 있습니다. 직접 해보기:

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 코드 행을 참조하세요.