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

[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 - Home (JS입문) + Javascript Framework (프레임워크) 종류
Basic JS - Intro (JS소개)
Basic JS - Where To (JS위치) - JS구문 / JS코드위치 / JS사용법 ※ JS외부링크 주의사항
Basic JS - Output (JS출력= JS쓰기) ★★★★★ document.write() = 다큐먼트라이트
Basic JS - Syntax (JS구문) ★
Basic JS - Statement (JS구문= JS명령문)
Basic JS - Comment (JS주석)
Basic JS - Variable (JS변수) ★★★★★
Basic JS - Operator (연산자) - JS연산자 ★★★★★
Basic JS - Data Type - 데이터유형 ★★★★★ (= 데이터형식 = 데이터타입 = 데이터종류 = 자료형…
Basic JS - Function - JS함수 ★★★★★ ※ 일반함수 특징 2
Basic JS - Object - JS객체 ★★★★★
Basic JS - Scope - JS유효범위 (= JS접근범위 = 변수 종류) ★★★★★★★★★★
Basic JS - Event - JS이벤트 (= JS코드실행방법) ★★★★★
Basic JS - Strings - JS문자열
Basic JS - String Methods - JS문자열메서드
Basic JS - Number - JS숫자
Basic JS - Number Method - JS숫자메서드
Basic JS - Math 객체 - JS수학객체 (= JS산수객체 = Math객체 = Math Object = 매스 …
Basic JS - Dates - JS날짜
1/67
목록
찾아주셔서 감사합니다. Since 2012