• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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. 그외 브라우저는 직접 구글링 권장 ^^;

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
Basic JS - Date Method - JS날짜메서드
Basic JS - Array - JS배열 ★★★★★
Basic JS - Array Method - JS배열메서드
Basic JS - Sorting Array - JS배열정렬
Basic JS - Booleans() 메서드 - JS참거짓판단 (= JS참거짓메서드 = JS블린메서드 = JS불린즈메…
Basic JS - Comparison and Logical Operator - JS비교연산자 / JS논리연산자
Basic JS - if...else 조건문 구문 ★ (= 이프 엘스 조건문 = 이프문) ※ 시간 조건문
Basic JS - Switch 조건문 구문 (= 스위치문 = 스위치조건문)
Basic JS - for반복문 ★★★★★ - (JS포반복문 = for문 = JS포문) ※ 가변 배열키
Basic JS - While 반복문 구문 (= While문 = While반복문 = 와일문 = 와일반복문)
Basic JS - Break - 반복문중단 (= 브레이크) ★ / Continue - 반복문건너뛰기 (= 컨티뉴) ★…
Basic JS - Type Conversion - 데이터타입변환 (= 데이터유형변환 = 데이터타입변경 = 데이터유형변…
Basic JS - Bitwise Operations -
Basic JS - Regular Expressions -
Basic JS - Errors - Throw and Try to Catch (에러 처리 구문)
Basic JS - Debugging (디버깅/디버그) - (에러/오류) 찾기/제거 방법
Basic JS - Hoisting (호이스팅) - 변수선언끌어올리기 (= 변수선언위치변경)
Basic JS - Use Strict - 엄격모드 ★★★
Basic JS - Style Guide and Coding Conventions -
Basic JS - Best Practices (올바른코딩)
2/67
목록
찾아주셔서 감사합니다. Since 2012