목차
- 주요 에러 종류
- 에러 발생 시 현상
- console.log() 메서드
- breakpoint (중단점) 설정
- debugger 키워드
- 브라우저 디버깅 툴 열기
주요 에러 종류
- 구문 에러 - (예) 글자가 틀린 경우
- 위치 에러 - (예) 코드 위치 잘못된 경우
- 논리 에러 - (예) 코드 변수/조건 등이 잘못된 경우
에러 발생 시 현상
- 에러 발생 시, 웹페이지엔 보통 아무 메시지도 표시 안 됨.
- 개발자도구 (크롬: 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. 그외 브라우저는 직접 구글링 권장 ^^;
