[Basic] JS - Debugging (디버깅/디버그) - (에러/오류) 찾기/제거 방법

1. 주요 에러 종류
2. 에러 발생 시 현상
3. console.log() 메서드
4. breakpoint (중단점) 설정
5. debugger 키워드
6. 브라우저 디버깅 툴 열기

주요 에러 종류

 

1. 구문 에러 - (예) 글자가 틀린 경우
2. 위치 에러 - (예) 코드 위치 잘못된 경우
3. 논리 에러 - (예) 코드 변수/조건 등이 잘못된 경우

 

에러 발생 시 현상

 

• 에러 발생 시, 웹페이지엔 보통 아무 메시지도 표시 안 됨.
• 개발자도구 (크롬: F12키 > Console탭)에서 확인해야 함.

 

console.log() 메서드

1. 아래처럼 소스 입력 시, 에러 발생해 웹 화면에선 아무 것도 안 보임.

 

<script>

a = 3;

b = 4;

sum = a + b;

console.log(c);

</script>

---

2. 개발자도구 (크롬: F12키 > Console탭)에서 에러 확인 가능.

 

Uncaught ReferenceError: c is not defined

    at (index):5:13

※ 의미: index 파일 5라인 13번째 글자 c는 정의 안 되었다.

---

3. c를 sum으로 변경 후 개발자도구에서 확인하면 결과값 7 확인 가능.

 

<script>

a = 3;

b = 4;

sum = a + b;

console.log(sum);

</script>

breakpoint (중단점) 설정

 

• 디버거 창에서 JS 코드에 중단점을 설정 가능.
• 각 중단점에서 JS는 실행 중지하고 JS 값을 검사 가능.
• 값 검사 후, 코드 실행 재개 가능. (보통, 재생 버튼 사용)

 

debugger 키워드

 

• 사용 가능 시, JavaScript 실행을 중지하고 디버깅 기능을 호출. 
• 디버거에서 breakpoint (중단점) 설정하는 것과 동일한 기능임.
• 사용 불가 시, 효과 없음.

 

---

[예제] - 사용 가능 시, JS 3라인 코드 실행 전 코드 실행 멈춤.

 

<p id="demo"></p>

<script>

let x = 3 * 4;

debugger;

document.getElementById("demo").innerHTML = x;

</script>

 

브라우저 디버깅 툴 열기

 

보통, (F12키 > Console 탭)에서 함.

 

---

[크롬]

 

Ctrl + Shift + I

 

또는,

 

브라우저 열기
> 추가 메뉴 (= 우측 상단 점3개) 클릭

> 도구 더보기

> 개발자 도구

> Console 탭 클릭

 

PS. 그외 브라우저는 직접 구글링 권장 ^^;