j38. 자바스크립트 디버깅

자바스크립트 디버깅

디버거 (debugger) 없이 자바스크립트 코드를 쓴다는 것은 매우 어렵습니다.

코드에 구문 에러나, 논리적 에러 들은 진단 하기도 매우 어렵습니다.

어떤 때는 자바스크립트 코드에 에러가 있을 때 조차도 아무 것도 발생하지 않을 수 있습니다.

에러 메시지도 없고 어디에서 에러를 찾아야 할지 암시 조차 없을 수도 있습니다.

---

프로그래밍 코드에서 에러를 찾는 것을 코드 디버깅 (code debugging) 이라고 합니다.

디버깅은 쉽지는 않습니다. 그러나 다행히도 대부분의 브라우저 들은 내장된 디버거 (a built-in debugger) 를 가지고 있습니다.

내장된 디버거 들은 켜고 끌수가 있고, 에러를 사용자에게 보고하도록 할 수 있습니다.

디버거로 일시 중단점 (breakpoints) 을 설정하여 코드 실행을 어떤 지점에서 중단 시키고, 코드가 실행되는 동안의 변수들을 조사할 수도 있습니다.

일반적으로, 디버깅을 브라우저에서 활성화 하려면 F12 키를 누르거나, 디버거 메뉴 (debugger menu) 또는 개발자 도구 (developer tools) 에서 콘솔 (Console) 을 선택합니다.

---

브라우저에서 F12 키를 누르거나, 디버거 메뉴 (debugger menu) 또는 개발자 도구 (developer tools) 에서 콘솔 (Console) 을 선택합니다.

console.log(); 에 의해 콘솔에 값이 나타납니다.

브라우저가 디버깅을 지원한다면, console.log() 메서드를 사용할 수 있습니다. 이것은 디버거 창에 자바스크립트 값 들을 표시해 줄수 있습니다.

<p>브라우저에서 F12 키를 누르거나, 디버거 메뉴 (debugger menu) 또는 개발자 도구 (developer tools) 에서 콘솔 (Console) 을 선택합니다.</p>

<p>console.log(); 에 의해 콘솔에 값이 나타납니다.</p>

<script>
l = 10;
m = 3;
n = l % m;
console.log(l);
console.log(m);
console.log(n);
</script>

---

디버거 창으로, 자바스크립트 코드에 일시 중단점 (breakpoints) 을 설정할 수 있습니다.

각 중단점에서, 자바스크립트는 실행을 중지하고, 자바스크립트 값 들을 조사할 수 있도록 해 줍니다.

값을 조사한 후에, 다시 플레이 버튼 같은 것을 눌러서, 코드를 다시 실행 할 수 있습니다.

---

디버거를 켜고, 브라우저를 리로드 하여 실행하면, 아래 코드에서 debugger; 에서 실행이 중지됩니다.

다시 플레이 버튼을 눌러 재실행 하면 결과값이 화면에 표시될 것입니다.

10 % 3 의 결과값은:

디버거 키워드 (debugger keyword) 는 자바스크립트 실행을 중단 시키고, 디버깅 기능을 호출 하기도 합니다.

이것은 디버거 내에 일시 중단점을 설정하는 것과 동일한 기능을 가집니다.

디버깅 기능이 가능하지 않는 경우에는 디버거 문은 효과가 없게 됩니다.

디버거 를 켜놓은 상태에서는, debugger; 코드 라인에서 실행을 정지하게 됩니다.

다시 플레이 버튼을 누르면 계속 실행되어 화면에 결과값을 표시하게 됩니다.

<p>디버거를 켜고, 브라우저를 리로드 하여 실행하면, 아래 코드에서 debugger; 에서 실행이 중지됩니다.</p>

<p>다시 플레이 버튼을 눌러 재실행 하면 결과값이 화면에 표시될 것입니다.</p>

<p>10 % 3 의 결과값은: <span id="debuggerResult"></span></p>

<script>
x = 10;
y = 3;
z = x % y;
debugger;
document.getElementById("debuggerResult").innerHTML = z;
</script>

---

일반적으로 디버깅을 활성화 하려면 F12 키를 누르거나, 디버거 메뉴에서 콘솔 (Console) 을 선택 합니다만, 그 외에 경우에는 아래와 같이 하면 됩니다.

크롬 메뉴에서 View (보기) > Developer (개발자) > Developer Tools (개발자 도구) > Console (콘솔) 을 선택합니다.

인터넷 익스플로러 메뉴에서 Tools (도구) > Developer Tools (개발자 도구) > Console (콘솔) 을 선택합니다.

---

[광고] Udemy 동영상 강의로 보기