초보 개발자들을 위한 디버깅 방법

디버깅이란? 디버깅 또는 컴퓨터 프로그램 개발 단계 중에 발생하는 시스템의 논리적인 오류나 비정상적 연산(버그)을 찾아내고 그 원인을 밝히고 수정하는 작업 과정을 뜻합니다!

 

기존에는 console.log를 넣고 매번 수동적으로 컴파일을 하고 나서 확인하는 방법이었는데... 

이번 시간에는 코드 에디터를 사용하여 디버깅을 할 수 있는 Debugger에 대해서 알아볼 거예요. 저는 드림코딩 엘리님의 유튜브를 보면서 따라 해 보았습니다.

 

여기서 말하는 Debuugger는

주로 원하는 코드에 중단점(Break Point)을 지정하여 프로그램 실행을 정지하고, 메모리에 저장된 값을 살펴보며, 실행을 재개하거나, 코드를 단계적으로 실행하는 등의 동작을 하는 것을 말합니다!

 

다양한 개발툴(브라우저, 인텔리 제이, 비쥬얼 스튜디오 코드, 안드로이드 스튜디오 등)에서 공통적으로 사용할 수 있는데, 저는 비쥬얼 스튜디오를 쓰기 때문에, 비쥬얼 스튜디오로 사용하는 법을 알아보겠습니다.

 

디버거를 이용하면, 동적으로 값을 변경하고 확인할 수 있어요!

실행 및 디버그를 누르면 브라우저인지 node인지 선택

1. 기본 메뉴 툴: 코드를 어떻게 실행할 건지 진행하는 것에 대한 기본적인 메뉴 툴

(a) 설정된 Break Point로 실행.

(b) 코드 한 줄 한 줄씩 실행, 다른 함수를 호출할 때 무시 건너뛰면서 확인할 수 있어요

실행할 때마다, 변수에서 값이 어떻게 바뀌고 있는지 확인할 수 있어요.

(c) 함수 안으로 들어가고 싶다면, c를 누르면 됩니다. 여기서는 callMyName 함수 안으로 들어갑니다.

(d) 해당 함수 밖으로 들어가고 싶을 때, 사용.

(e) 다시 재 시작

(f) 디버거 중지.

2. 변수: 전체적인 변수 값에 대한 것3. 조사식(WATCH): 부분적인 부분을 확인할 때,4. 호출스택: 함수가 어떤 순서대로 실행되었는지5. 중단점: 중단점(Break Point)를 설정한 것을 확인, 비활성화도 설정할 수 있어요!

 

다른 값을 넣어 확인하고 싶을 때,아래와 같이 더블클릭 후 값을 넣어주면 됩니다.

또한, 특정한 조건일 때만 Break Point를 사용할 경우, 해당 Break Point 우클릭 후 편집을 눌러주고 조건을 입력해주면 되는 기능도 있습니다!!

이번 시간에는, 개발 툴에서 직접 해보면서 사용해보았는데, console.log와 같이 사용하면서 디버깅을 하면 개발 속도와 실력을 더 높일 수 있을 거라고 생각해요.

개발 툴뿐만이 아니라, 크롬 개발자 도구 Sources 탭에서도 사용할 수 있으니까 같이 이용하면 좋을 것 같아요!

 

 

출처

https://www.youtube.com/watch?v=IwC-BVM2_YQ

https://ko.wikipedia.org/wiki/%EB%94%94%EB%B2%84%EA%B7%B8