[VSCode][React] VSCode로 React Debug 사용하기

VSCode Run and Debug

 

1. Debug 사용하기 위한 설정

craete a launch.json file.을 클릭한다.

 VSCode에 내장되어 있는 Chrom debugger를 사용하기 위해 Web App (Chrom)을 클릭한다.

클릭 후에는 .vscode 폴더와 launch.json 파일이 생성된다.

 

launch.json의 url의 값을 React 기본 url인 localhost:3000으로 수정한다.

 

Debug 전에 React를 먼저 실행한다. (설정한 localhost:3000)

Start Debugging 버튼 또는 F5를 누르면 디버깅이 시작되면서 새로운 크롬 브라우저가 띄워진다.

디버깅 크롬 브라우저를 새로고침 하면 VSCode에 Debug도 새로고침 된다.

만약 디버깅 크롬이 아무 화면도 안나온다면 설정한 url이 맞는지 확인해보자.

 

2. Debug 사용

2-1. BreakPoints (중단점)

VSCode 여백을 클릭하거나 현재 커서 라인에서 F9을 클릭하면 BreakPoints을 토글할 수 있다.

 

2-2. Debug Action

Continue / Pause (F5)
다음 BreakPoints으로 이동한다. 다음 BreakPoints이 없을 경우  

Step Over (F10)
BreakPoints의 다음 라인으로 이동한다. 다음 라인이 함수면 실행은 하지만 내부 라인으로 이동하지 않는다.

Step Info (F11)
BreakPoints의 다음 라인으로 이동한다. 다음라인이 함수면 함수 내부 라인으로 이동한다.

Step Out (Shift + F11)
함수 내부에 있을 때 남은 라인 실행을 완료하고(Return하고) 함수를 빠져나온다.

 

Debug Action을 사용하기 위해 App.tsx에 함수를 사용하는 예제를 만들었다. 디버깅을 시작하면 BreakPoints에 걸리게 된다.

 

Step Over (F10)

8번 라인에서 getName 함수가 실행되었지만 함수 내부 라인으로 들어가지 않고 바로 아래 라인으로 이동하게 된다.

 

Step Info (F11)

8번 라인에서 getName 함수가 실행되었고, 실행된 함수 내부 라인으로 들어오게 되었다.

 

Step Out (Shift + F11)

위에 이미지 처럼 함수 내부에 들어왔을 때 Step Over (F10) 또는 Step Info (F11)을 클릭하면 바로 아래 라인 'return name'으로 이동하지만 Step Out (Shift + F11)을 클릭하면 함수 내부를 빠져나오게 된다.

 

 

참고 자료

https://code.visualstudio.com/docs/editor/debugging#_data-inspection

Debugging in Visual Studio Code

https://code.visualstudio.com/docs/nodejs/reactjs-tutorial#_debugging-react

React JavaScript Tutorial in Visual Studio Code