4. Add Number 1 and Number 2 버튼을 클릭하세요. 결과가 6이어야 하지만 51이 나옵니다.
이것이 우리가 디버그 해야할 점입니다.
그림 1. 결과는 6이 아닌 51이 됩니다
Step 2: Get familiar with the Sources panel UI
DevTools는 CSS 변경, 페이지 로드 성능 프로파일링, 네트워크 요청 모니터링 등 다양한 작업을 위한 다양한 도구를 제공합니다. Source panel 에서는 JavaScript를 디버깅할 수 있습니다.
1. 맥의 경우 Command + Option + I, 윈도우의 경우 Control + Shift + I 로 Console Panel을 열 수 있습니다.
그림 2. Console 창
2. Source tab을 누르세요.
그림 3. Source 창
Source panel의 경우 UI가 3개로 분할됩니다.
그림 4. 3개로 분할된 Sources 창
File Navigator. 페이지에 요청되는 모든 파일이 여기에 나열됩니다.
Code Editor. File Navigator(파일 탐색기) 창에서 파일을 선택하면 해당 파일의 내용이 여기에 표시됩니다.
JavaScript Debugging. 페이지의 JavaScript를 검사하기 위한 다양한 도구입니다. DevTools 창이 넓은 경우 이 창이 Code Editor 창의 오른쪽에 표시됩니다.
Step 3: Pause the code with a breakpoint
일반적으로 이러한 문제들을 해결할 때 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() 를 사용하면 원하는 결과를 얻을 순 있지만 Breakpoint 를 사용하면 디버그를 빠르게 할 수 있습니다. Breakpoint 를 사용하면 코드를 실행하는 중간에 일시중지 후 해당 시점의 모든 값을 검사할 수 있습니다. Breakpoint 는 console.log() 방법에 비해 다음과 같은 장점들이 있습니다.
console.log()를 사용하는 경우 수동으로 원본 코드를 열고 관련 코드를 찾은 다음 Console.log() 문을 삽입한 다음 페이지를 다시 로드해야 콘솔에서 메시지를 볼 수 있습니다. Breakpoint 를 사용하면 코드 구조와 상관없이 관련 코드를 일시 중지할 수 있습니다.
console.log() 문에서 검사할 각 값을 명시적으로 지정해야 합니다. 중단점을 사용하면 DevTools가 해당 시점의 모든 변수 값을 표시합니다. 때때로 여러분도 모르게 여러분의 코드에 영향을 미치는 변수들이 있습니다.
즉, Breakpoint를 사용하는 것이 console.log() 를 사용하는 것보다 더 버그를 빠르게 찾을 수 있습니다.
한 걸음 물러서서 앱의 작동 방식을 생각해보면, 1번과 2번 추가 버튼과 관련된 Click event listener 에서 잘못된 합계(5 + 1 = 51)가 계산된다고 추측할 수 있습니다. 따라서 Click event listener가 실행되는 시간 즈음에 코드를 일시중지시킬 수 있습니다. Event Listener Breakpoint 를 통해 다음을 수행할 수 있습니다.
JavaScript Debugging 창에서 Event Listener Breakpoints을 클릭하여 섹션을 확장합니다. DevTools는 Animation 및 Clipboard와 같은 확장 가능한 이벤트 목록을 표시합니다.
Mouse 이벤트 범주 옆에 있는 확장을 클릭합니다. DevTools에 click 및 mousedown과 같은 마우스 이벤트 목록이 표시됩니다. 각 이벤트 옆에는 check box 가 있습니다.
click check box를 확인합니다. 이제 click event listener가 실행될 때 자동으로 일시 중지되도록 DevTools가 설정되었습니다.그림 5. click check box를 체크
데모로 돌아가 Add Number 1 and Number 2 버튼을 다시 클릭합니다. DevTools가 데모를 일시 중지하고 Source panel 에서 코드 줄을 강조 표시합니다. 다음 코드 라인에서 DevTools를 일시 중지해야 합니다.
function onClick() {
다른 라인에서 일시중지된 경우 원하는 라인까지 Resume Script Execution 버튼을 누르세요. 다음 버튼:
Note: 원하지 않은 줄에서 일시중지된 경우 방문하는 모든 페이지에 click event listener를 등록하는 브라우저 extension이 있습니다. 확장의 click event listener 에서 일시 중지되었습니다. 모든 확장을 실행 중지하는 Incognito 모드를 사용하여 비공개로 탐색하는 경우 매번 올바른 코드 줄을 일시 중지하는 것을 볼 수 있습니다.
Event Listener Breakpoints 는 DevTools에서 사용할 수 있는 많은 breakpoint들 중 하나에 불과합니다. 각 유형은 서로 다른 시나리오를 최대한 빨리 디버깅할 수 있도록 지원하므로 모든 유형을 알고있는 것이 좋습니다. 각 유형의 사용 시기 및 방법에 대한 자세한 내용은 Pause Your Code With Breakpoints 를 참조하십시오.
Step 4: Step through the code
버그의 일반적인 원인 중 하나는 스크립트가 잘못된 순서로 실행되는 경우입니다. 코드를 단계별로 살펴보면 한 번에 한 줄씩 실행 코드를 살펴보고 예상과 다른 순서로 실행되었다는 것을 알 수 있습니다. 다음 순서를 따라해보세요.
1. DevTools의 Source 패널에서 Step to next function을 클릭하면 Step to next function 호출이 한 번에 한 줄씩 실행됩니다. DevTools는 다음 코드 라인이 Highlight됩니다.
if (inputsAreEmpty()) {
2. Step over next function call
을 클릭하세요. DevTools는 inputsAreEmpty()를 거치지 않고 실행할겁니다. DevTools에서 몇 줄의 코드가 생략되는 거겠죠. 이는 inputsAreEmpty()가 false로 평가되었기 때문에 if 문의 코드 블록이 실행되지 않았기 때문입니다.
여기까지가 코드를 검토하는 기본입니다. get-started.js의 코드를 보면 버그가 updateLabel() 함수 어딘가에 있는 것을 알 수 있습니다. 모든 코드 줄을 일일이 검사하는 대신 다른 유형의 breakpoint를 사용하여 버그가 있을만한 위치 근처에서 코드를 멈출 수 있습니다.
Step 5: Set a line-of-code breakpoint
Line-of-code breakpoints는 가장 일반적인 breakpoint유형입니다. 중지하려는 특정 코드 줄이 있는 경우 Line-of-code breakpoints를 사용하세요.
2. 코드 왼쪽편에서 코드의 라인 번호(32)를 볼 수 있습니다. 32번 클릭. DevTools는 32에 파란색 아이콘이 표시됩니다. 이는 이 줄에 line-of-code breakpoint가 있음을 의미합니다. 이제 이 코드 라인이 실행되기 전에 DevTools가 일시 중지됩니다.
3. Resume script execution 를 클릭합니다.
스크립트는 32줄에 도달할 때까지 계속 실행됩니다. 줄 29, 30 및 31에서 DevTools는 각 줄 세미콜론의 오른쪽에 addend1, addend2 및 sum의 값을 출력합니다.
그림 6. DevTools는 32번째 라인에서 멈춥니다.
Step 6: Check variable values
addend1, addend2 및 sum 값이 이상합니다. 따옴표로 둘러 싸여있으니 String이란 뜻이죠. 이것은 버그의 원인을 설명하기에 좋습니다. 이제 더 많은 정보를 알아낼 수 있습니다. DevTools는 변수 값을 검사하는 많은 도구를 제공합니다.
Method 1: The Scope pane
코드 라인에서 일시정지되면 Scope 창에 현재 정의된 로컬 및 글로벌 변수와 각 변수의 값이 표시됩니다. 또한 해당되는 경우 closure 변수도 표시됩니다. 변수 값을 Double-click하여 수정할 수있습니다. 코드를 멈추지 않으면 Scope 창에는 아무것도 뜨지 않습니다.
그림 7. Scope 창
Method 2: Watch Expressions
Watch Expressions 탭을 통해 시간 경과에 따른 변수 값을 모니터링할 수 있습니다. 이름에서 알 수 있듯이 Watch Expressions는 변수에만 국한되지 않습니다. Watch Expression에 유효한 JavaScript 식을 저장할 수 있습니다. 다음을 따라해 보세요
Watch Tab을 누르세요.
Add Expression 을 누르세요.
typeof sum을 입력하세요.
Enter를 누르면 DevTools에 typeof sum: "string"이 표시됩니다. 콜론 오른쪽에 있는 값은 Watch Expression의 결과입니다.
그림 8. 합계 Watch Expression 유형을 생성한 후 Watch Expression 창(오른쪽 아래) DevTools 창이 큰 경우 Watch Expression 창 오른쪽의 Event Listener Breakpoint 창에 표시됩니다.
예상한 바와 같이 sum 은 문자열로 인식하는데 이때 숫자가 되어야 합니다. 이제 이것이 버그의 원인임을 확인했습니다.
Method 3: The Console
Console.log() 를 사용하여 임의의 JavaScript 문을 확인할 수도 있습니다. 디버깅과 관련하여 Console을 사용하여 잠재적인 버그 수정 사항을 테스트할 수 있습니다. 다음과 같이 사용하세요.
콘솔 드로어가 열려 있지 않으면 Escape를 눌러 열 수 있습니다. DevTools 창의 하단에 열리게됩니다.
콘솔에서 parseInt(addend1) + parseInt(addend2)를 입력합니다. 이 문은 addition1 및 addend2가 범위 내에 있는 코드 라인에서 일시 중지되어 있기 때문에 작동합니다.
Enter를 누릅니다. DevTools는 구문을 분석하고 6을 출력합니다. 이 결과는 데모를 통해 얻을 수 있는 기댓값입니다.
그림 9. parseInt(addend1) + parseInt(addend2)를 읽은 후 콘솔 드로어.
Step 7: Apply a fix
해당 버그의 해결책을 찾았습니다. 이제 코드를 편집하고 데모를 다시 실행하여 문제를 해결하는 일만 남았습니다. 수정 사항을 적용하기 위해 DevTools를 그대로 둘 필요는 없습니다. DevTools UI 내에서 JavaScript 코드를 직접 편집할 수 있습니다. 다음과 같이 따라하세요.
