[JavaScript] 오류 확인
백엔드인데...............프론트에서 오류날 때마다 버벅대다가 정리해본다.
개발자가 아니여도 알고있는 크롬브라우저의 개발자도구!
개발자도구는 단축키 [F12]를 누르거나 굳이 [Ctrl]+[Shift]+[I]를 동시에 눌러도 실행이 된다.
키보드가 망가져서 단축키를 누르지 못하는 상황이라면
오른쪽 상단에 메뉴(점세개) - 도구 더 보기 - 개발자 도구를 클릭하면 된다.
Elements : html/CSS 상태 확인
Console : 콘솔 (변수 정보를 확인하고 오류 메시지 표시)
Sources : 스크립트 디버깅 (break point 지정 및 변수 모니터링 등)
Network : 브라우저에서 발생하는 통신 상태
Performance(예전 Timeline패널) : 성능 측정
Memory(예전 Profiles 패널) : 메모리 사용 형태를 작성하고 누수 탐색.
Application(예전 Resources 패널) : 쿠키 및 스토리지 등의 내용 수집
Security : Mixed content 이슈, 인증서 문제 등을 디버깅
가장 많이 사용하는 부분은 오류확인에 필요한 부분인 빨간색으로 체크해놓은 Console이다.
에러가 나게되면 그 밑에 파란색 박스에 아래와 같이 에러가 나오게 된다.
오류 유형
자바스크립트에는 SyntaxError(구문오류)외에도 다양한 오류유형이 있다.
- EvalError : eval() 함수와 관련한 오류가 발생했을 때
- InternalError : 자바스크립트 엔진 내부에서 오류가 발생했을 때
- RangeError : 숫자 변수나 매개변수가 유효한 범위를 벗어났을 때
- ReferenceError : 잘못된 참조를 했을 때
- SyntaxError : 코드 분석 중 잘못된 구문을 만났을 때
- TypeError : 변수나 매개변수가 유효한 자료형이 아닐 때
- URIError : encodeURI()나 decodeURI() 함수에 부적절한 매개변수를 제공했을 때
오류유형을 보고 어떤 오류가 났는지 대략 파악할 수 있다.
가장 많이 하는 오타, 쉼표, 괄호, 따옴표 같은 기호를 빼먹거나 더 입력하는 사소한 오입력은 SyntaxError이다......
SyntaxError 외 나머지 오류는 runTimeError로 분류된다.
참고자료