코딩의 시작과 끝, 디버깅 | 실력있는 개발자의 필수 무기 🐛🐞

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

 

 

디버깅에서 가장 중요한 것

: 문제를 정확히 정의 하는 것

: 문제를 정의하지 않고 무작위로 수정하면 더 심각한 버그를 도입할 수 있음

 

 

 

디버깅

: 예상하고 원하는 문제가 무엇인지

: 실제로 무슨 일이 일어나고 있는지

: 어떤 순서로 어떻게 버그가 발생하고 있는지 

 

- 다른의미

: 원하는 로직과 성능, 비용 등을 달성하기 위한 작업

: unit testing

: integration testing

: control flow analysis

: log file analysis

: print logs

: interactive debugging

: memeory dumps

: profiling

 

 

 

 

Interactive debugging

: debugger를 통해 디버깅을 하는 방법

: debugger는 IDE에 포함되어 있는 기능

: 동적으로 값을 확인할 수 있음

 

 

 

VSCode Debugger

: Run and Debug > 언어에 맞게 디버거를 선택

 

- break point

: 코드 라인 좌측에 클릭하여 의심가는 곳에 찍어놓고 디버깅을 실행

: 디버거를 실행하면 찍어놓은 브레이크 포인트에 멈추게 됨

 

- 디버거 메뉴

: 디버깅을 실행하면 상단에 메뉴가 뜨는데, 한단계 씩 실행하는 버튼과 여러 기능들이 있음

: 현재의 다음 브레이크 포인트를 실행

: 코드를 한 줄 씩 실행하는데, 함수를 호출할 때 무시하고 건너 뜀

: 한 번 실행 할 때마다 변수의 값 변화를 알 수 있음

: 함수 안으로 진입 / 함수 밖으로 탈출

: 새로고침 / 중지

 

- 좌측 Variables

: 좌측에는 지역변수와 전역변수 등 어떤 변수들이 정의 되었는지 등을 알 수 있음

 

- 좌측 watch

: +를 눌러 관심있는 변수를 설정할 수 있음

: boolean을 통한 검사도 가능

 

- 좌측 Call Stack

: 함수가 어떤 순서로 실행되었는지 확인 가능

 

- 좌측 loaded scripts

: 어떤 스크립트들이 실행 되었는지 확인 가능 

 

- 좌측 break points

: 브레이크 포인트를 어떤 것을 걸었는지 알 수 있고 브레이크 포인트의 비활성화도 가능

 

 

 

 

동적으로 디버거를 사용하기

: 좌측 메뉴에서 변수의 값을 변경 할 수 있음

: watch에 확인하고 싶은 변수를 볼 수 있음

 

 

 

 

디버거 꿀팁

: Break  Point 우클릭 > edit break point > 특정한 조건일 때 브레이크 포인트가 멈추게 조건문 작성 가능

: 조건에는 Hit Count, Log Message 등 여러가지 기능이 있음

: call stack을 확인하면서 어떤 함수가 호출 했는지 위치도 확인할 수 있음