이 자습서에서는 개발자 도구의 자바스크립트 문제를 디버깅하기 위한 기본 워크플로를 설명합니다. 읽기,또는 아래,이 튜토리얼의 비디오 버전을 시청.

#1 단계:버그 재현

버그를 일관되게 재현하는 일련의 작업을 찾는 것이 항상 디버깅의 첫 번째 단계입니다.

1. 데모 열기를 클릭합니다. 데모가 새 탭에서 열립니다.

   데모 열기

2. 숫자 1 텍스트 상자에5을 입력합니다.

3. 숫자 2 텍스트 상자에1을 입력합니다.

4. 숫자 1 과 숫자 2 추가를 클릭합니다. 버튼 아래의 레이블에5 + 1 = 51이 표시됩니다. 결과는6이어야 합니다. 이것은 당신이 고칠 버그입니다.

   

   그림 1. 5+1 의 결과는 51 입니다. 그것은 6 이어야합니다.

# 2 단계:소스 패널에 익숙해지십시오.

소스 패널은 자바스크립트를 디버깅하는 곳입니다.

1. 명령+옵션+나(맥)또는 제어+시프트+나(윈도우,리눅스)를 눌러 개발자도구를 엽니다. 이 바로 가기는 콘솔 패널을 엽니 다.

   

   그림 2. 콘솔 패널

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

   

   그림 3. 소스 패널

그림 4. 소스 패널의 3 부분 사용자 인터페이스

1. 파일 탐색기 창입니다. 페이지에서 요청하는 모든 파일이 여기에 나열됩니다.
2. 코드 편집기 창입니다. 파일 탐색기 창에서 파일을 선택하면 해당 파일의 내용이 여기에 표시됩니다.
3. 자바스크립트 디버깅 창입니다. 페이지의 자바 스크립트를 검사하기위한 다양한 도구. 개발자 도구 창이 넓으면 코드 편집기 창의 오른쪽에 이 창이 표시됩니다.

# 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.log()문에 검사할 각 값을 명시적으로 지정해야 합니다. 중단점을 사용하면 개발자 도구는 해당 순간의 모든 변수 값을 표시합니다. 때로는 코드에 영향을 미치는 변수가 있는데,이는 여러분이 알지 못하는 변수입니다.

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

한 걸음 뒤로 물러서서 앱 작동 방식을 생각하면 숫자 1 및 숫자 2 추가 버튼과 관련된click이벤트 리스너에서 잘못된 합계(5 + 1 = 51)가 계산된다는 추측을 할 수 있습니다. 따라서click리스너가 실행되는 시간에 코드를 일시 중지해야 할 수 있습니다. 이벤트 리스너 중단 점을 사용하면 다음과 같이 정확하게 수행 할 수 있습니다:

1. 자바스크립트 디버깅 창에서 이벤트 수신기 중단점을 클릭하여 섹션을 확장합니다. 개발자 도구는 애니메이션 및 클립보드와 같은 확장 가능한 이벤트 범주 목록을 표시합니다.

2. 마우스 이벤트 범주 옆에 있는확장을 클릭합니다. 개발자 도구는 클릭 및 마우스 다운과 같은 마우스 이벤트 목록을 보여줍니다. 각 이벤트 옆에 체크 박스가 있습니다.

3. 클릭 확인란을 선택합니다. 이제click이벤트 리스너가 실행될 때 개발자 도구가 자동으로 일시 중지되도록 설정됩니다.

   

   그림 5. 클릭 확인란이 활성화됩니다

4. 데모에서 번호 1 과 번호 2 를 다시 추가를 클릭합니다. 개발자 도구는 데모를 일시 중지하고 소스 패널에서 코드 줄을 강조 표시합니다. 이 코드 줄에서 개발자 도구를 일시 중지해야 합니다:

   function onClick() {

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

   참고:다른 줄에서 일시 중지한 경우 방문하는 모든 페이지에click이벤트 리스너를 등록하는 브라우저 확장이 있습니다. 확장의click수신기에서 일시 중지되었습니다. 시크릿 모드를 사용하여 모든 확장을 비활성화하는 비공개로 탐색하는 경우 매번 올바른 코드 줄에서 일시 중지되는 것을 볼 수 있습니다.

이벤트 리스너 중단점은 개발자 도구에서 사용할 수 있는 여러 유형의 중단점 중 하나일 뿐입니다. 각 유형은 궁극적으로 가능한 한 빨리 다른 시나리오를 디버깅하는 데 도움이되기 때문에 모든 다른 유형을 암기 할 가치가 있습니다. 각 유형을 사용하는 시기와 방법을 알아보려면 중단점으로 코드 일시 중지를 참조하십시오.

#4 단계:코드 단계

버그의 일반적인 원인 중 하나는 스크립트가 잘못된 순서로 실행되는 경우입니다. 코드를 단계별로 실행하면 코드의 실행을 한 번에 한 줄씩 진행하고 예상했던 것과 다른 순서로 실행되는 위치를 정확히 파악할 수 있습니다. 지금 그것을 시도:

1. 개발자 도구의 소스 패널에서 다음 함수 호출 단계를 클릭하여onClick()함수를 한 번에 한 줄씩 실행합니다. 개발자 도구는 다음 코드 줄을 강조 표시합니다:

   if (inputsAreEmpty()) {

2. 다음 함수 호출에 대한 단계. 개발자 도구는 스테핑하지 않고inputsAreEmpty()을 실행합니다. 개발자 도구가 몇 줄의 코드를 건너 뛰는 방법을 확인하십시오. 이는inputsAreEmpty()이 거짓으로 평가되어if명령문의 코드 블록이 실행되지 않았기 때문입니다.

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

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

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

1. 에서 코드의 마지막 줄을 봐updateLabel():

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

2. 코드의 왼쪽에 32 이 특정 코드 줄의 줄 번호를 볼 수 있습니다. 클릭 32. 개발자 도구는 32 위에 파란색 아이콘을 넣습니다. 즉,이 줄에 코드 줄 중단점이 있습니다. 이제 개발자 도구는 이 코드 줄이 실행되기 전에 항상 일시 중지됩니다.

3. 스크립트 실행 재개를 클릭합니다. 스크립트는 라인 32 에 도달 할 때까지 계속 실행됩니다. 29,30 및 31 행에서 개발자 도구는 각 행의 세미콜론 오른쪽에addend1,addend2및sum의 값을 인쇄합니다.

   

   그림 6. 개발자 도구는 줄의 코드 줄 중단점에서 일시 중지됩니다 32

# 6 단계:변수 값

확인addend1,addend2및sum의 값이 의심스러워 보입니다. 그들은 따옴표로 싸여 있으며,이는 문자열임을 의미합니다. 이 버그의 원인을 설명하기위한 좋은 가설이다. 이제 더 많은 정보를 수집 할 때입니다. 개발자 도구는 변수 값을 검사하기 위한 많은 도구를 제공합니다.

#방법 1:범위 창

코드 줄에서 일시 중지되면 범위 창에 각 변수의 값과 함께 현재 정의된 로컬 및 전역 변수가 표시됩니다. 또한 해당되는 경우 클로저 변수를 보여줍니다. 변수 값을 두 번 클릭하여 편집합니다. 코드 줄에서 일시 중지되지 않으면 범위 창이 비어 있습니다.

그림 7. 범위 창

#방법 2:조사식

조사식 탭을 사용하면 시간 경과에 따른 변수 값을 모니터링할 수 있습니다. 이름에서 알 수 있듯이 조사 식은 변수에만 국한되지 않습니다. 당신은 시계 식에 유효한 자바 스크립트 식을 저장할 수 있습니다. 지금 그것을 시도:

1. 감시 탭을 클릭합니다.

2. 식 추가를 클릭합니다.

3. 유형typeof sum.

4. 를 눌러 입력합니다. 개발자 도구는typeof sum: "string"를 표시합니다. 콜론 오른쪽의 값은 조사 식의 결과입니다.

   

   그림 8. typeof sum조사식 식을 만든 후 조사식 창(오른쪽 아래). 개발자 도구 창이 큰 경우 조사식 창은 오른쪽,이벤트 수신기 중단점 창 위에 있습니다.

의심되는 대로sum는 숫자여야 할 때 문자열로 평가됩니다. 이제 이것이 버그의 원인임을 확인했습니다.

#방법 3: 콘솔

console.log()메시지를 보는 것 외에도 콘솔을 사용하여 임의의 자바스크립트 문을 평가할 수도 있습니다. 디버깅 측면에서 콘솔을 사용하여 버그에 대한 잠재적 수정 사항을 테스트 할 수 있습니다. 지금 그것을 시도:

1. 콘솔 서랍이 열려 있지 않은 경우 탈출을 눌러 엽니 다. 개발자 도구 창 하단에 열립니다.

2. 콘솔에parseInt(addend1) + parseInt(addend2)을 입력합니다. 이 문은addend1및addend2이 범위에 있는 코드 줄에서 일시 중지되므로 작동합니다.

3. 를 눌러 입력합니다. 개발자 도구는 문을 평가하고6을 출력합니다.

   

   그림 9. parseInt(addend1) + parseInt(addend2)을 평가 한 후 콘솔 서랍입니다.

# 7 단계:수정 프로그램 적용

버그 수정 프로그램을 찾았습니다. 남은 것은 코드를 편집하고 데모를 다시 실행하여 수정을 시도하는 것입니다. 수정 프로그램을 적용하기 위해 개발자 도구를 떠날 필요가 없습니다. 개발자 도구 사용자 인터페이스에서 직접 자바 스크립트 코드를 편집 할 수 있습니다. 지금 그것을 시도:

1. 스크립트 실행 재개를 클릭합니다.
2. 코드 편집기에서 행 31,var sum = addend1 + addend2을var sum = parseInt(addend1) + parseInt(addend2)로 바꿉니다.2727>
3. 를 눌러 변경 사항을 저장합니다.
4. 중단점 비활성화를 클릭합니다. 파란색으로 바뀌어 활성 상태임을 나타냅니다. 이 설정이 설정된 동안 개발자 도구는 설정한 중단점을 무시합니다.
5. 다른 값으로 데모를 사용해보십시오. 데모가 올바르게 계산됩니다.

축하합니다! 이제 자바 스크립트를 디버깅 할 때 크롬 개발자 도구를 최대한 활용하는 방법을 알고 있습니다. 이 튜토리얼에서 배운 도구와 방법은 당신에게 수많은 시간을 절약 할 수 있습니다.

이 자습서에서는 중단점을 설정하는 두 가지 방법만 보여줬습니다. 개발자 도구는 다음과 같은 많은 다른 방법을 제공합니다:

• 사용자가 제공한 조건이 참일 때만 트리거되는 조건부 중단점입니다.
• 잡힌 예외 또는 잡히지 않은 예외의 중단점.

각 유형의 사용 시기와 방법을 알아보려면 중단점으로 코드 일시 중지를 참조하십시오.

이 자습서에서 설명하지 않은 몇 가지 코드 스테핑 컨트롤이 있습니다. 자세한 내용은 코드 줄 넘기를 참조하십시오.