JavaScript - JavaScript의 디버깅과 개발 도구 활용

1. JavaScript가 뭘까?
2. JavaScript를 시작하기
3. JavaScript의 기본 문법

4. JavaScript 제어문

5. JavaScript 함수

6. JavaScript에서 객체와 배열은 무엇일까?

7. JavaScript에서 DOM 조작 방법

8. JavaScript의 유용한 기능 feat. ES6+

9. JavaScript의 디버깅과 개발도구 활용

 

JavaScript 코드를 작성하면서 예상치 못한 오류가 발생하거나 원하는 결과가 나오지 않을 때, 디버깅을 사용하게된다.

개발자분들은 알겠지만 각 툴마다 디버깅 기능을 사용하지 않으면 개발할 때 정말 힘든데, 우리가 보는 뷰 단에서 디버깅 하는 방법에 대해서 작성하려한다. 

디버깅의 기본 원칙과 함께 브러우저의 개발자 도구를 활용하는 방법을 알아보자!

 

---

1. 디버깅의 기본 원칙

 

(이 내용은 이렇게 작성하길 권장하는 부분이고, 이렇게 작성하지 않아도 디버깅하는데에 문제가 없다.)

 

디버깅은 코드에서 오류를 찾고 수정하는 과정이다. 

효율적으로 디버깅하기 위해 다음 원칙을 따르는 것이 좋다.

 

1. 문제를 이해하기

- 프로그램이 왜 예상대로 동작하지 않는지, 정확히 어떤 문제가 발생했는지 파악

- 오류 메시지와 문제 상황을 분석

 

2. 코드를 단계적으로 확인

- 코드를 한 줄씩 실행하거나 특정 부분에 초점을 맞춘다.

- 오류가 발생한 부분을 좁혀가며 문제의 원인을 찾는다.

 

3. 개발도구를 활용

- 브라우저 개발자 도구, 디버거, 콘솔 로그를 사용하여 문제를 분석

 

4. 코드 단순화

- 복잡한 코드를 간단한 테스트 케이스로 나누어 문제를 재현

 

 

---

2. 브라우저 개발자 도구

 

개발자도구는 Chrome, Firefox, Edge 등 현대 브라우저에 내장되어있다.

이를 통해 JavaScript 코드를 디버깅할 수 있다.

 

개발자 도구 열기

Windows : F12, Ctrl + Shift + I

Mac : Cmd + Option + I

 

개발자 도구에서 사용하는 주요 탭

- Console : 코드 실행, 오류 메시지 확인, 디버깅 로그 출력에 사용된다.

- Sources : JavaScript 파일을 확인하고, 코드의 특정 부분에 중단점(BreakPoint)을 설정할 수 있다.

- Network : 페이지 로드 중 네트워크 요청 (API 호출)을 확인할 수 있다.

 

---

3. 디버깅 방법

 

콘솔 로그 활용

- 각 JavaScript 소스 내부에 console.log()를 지정해서 단계별로 변수 값 또는 함수 실행 여부를 확인한다.

추가로 콘솔 메서드는 여러개 있는데,

console.error()

console.warn()

console.table() (테이블 형식으로 데이터 출력) 이 있다.

 

 

중단점 설정 (BreakPoint)

- 중단점(BreaPoint)은 코드 실행을 멈추고 현재 상태를 검사할 수 있는 지점을 설정한다.

- 위에서 설명한 개발자도구 탭에서 Sources 탭에서 설정한다.

- 중단하고 싶은 지점 왼쪽에 라인을 클릭하여 중단점을 설정한다.

- 실행해보면 해당 라인에서 멈추게 되는데, 우측에서 변수 값, 호출 스택(Call Stack)등을 확인할 수 있다.

 

 

디버거 키워드

중단점외에도 debugger 키워드를 코드에 삽입해서 실행을 중단시킬 수 있다.

(단, 개발자 도구가 열려있어야 한다.)

debugger 키워드에서 정확하게 멈춘다.

 

단계별 실행 (Step Into, Step Over, Step Out)

Step Into: 현재 줄에서 호출된 함수 내부로 이동하여 디버깅

Step Over: 현재 줄의 함수를 실행하지만, 내부로는 들어가지 않음

Step Out: 현재 함수 실행을 종료하고 호출한 함수로 돌아감

 

개발자 도구의 Sources 탭에서 이러한 디버깅 단계를 사용할 수 있다.

 

---

4. 오류 메시지 분석

 

브라우저 콘솔에서 오류 메시지를 제공하는데, 이 오류 메시지는 문제를 해결하는 데 중요한 힌트를 준다.

주요 오류 메시지 유형을 알아보자.

 

- SyntaxError : 문법 오류가 발생했을 때

- RefferenceError : 선언되지 않은 변수에 접근하려 할 때

- TypeError : 잘못된 데이터 타입에서 메스드를 호출할 때

 

 

---

정리

 

디버깅은 개발 과정에서 중요한 기술이다.

콘솔 로그, 중단점, debugger 키워드 등을 적절히 활용하면 문제를 효율적으로 해결할 수 있다.

브라우저 개발자 도구의 다양한 기능을 익히면 더 빠르게 오류를 찾아낼 수 있으니 많이 써보고 유용하게 사용하길 바란다.

 

끝.