[Setup] VS Code 에서 console.log() 안 쓰고 디버깅하기

VS Code에서 리액프 프로젝트를 만들고 코딩하다보면 변수들의 흐름을 보기 위해서 디버깅을 해야할 일이 많이 생긴다. 그럴 때마다 가장 쉬운 방법은 Console.log() 를 써서 변수를 크롬 개발자창에 찍어보는 것이지만 성에 안 찰 때가 많다. 콘솔에 띄우지 말고 VS Code 상에서 변수를 봐가며 디버깅을 해보자.

셋업

Extension

Debbuge for Chrome 익스텐션은 deprecated 되었기 때문에 아래 익스텐션을 설치해준다.

launch.json

{
    "version": "0.2.0",
    "configurations": [
        
        {
          "type": "chrome",
          "request": "launch",
          "name": "localhost:3000에 대해 Chrome 시작",
          "url": "http://localhost:3000",
          "webRoot": "${workspaceFolder}"
        }
    ]
}

package.json

아래 코드를 포함하도록 설정한다.

  "scripts": {
    "start": "react-scripts start",
  }

방법

1. 로컬 실행

yarn start

2. 디버그 창 실행

VS Code 왼쪽 디버그 탭에서 RUN AND DEBUG df 실행 버튼을 누른다. 그러면 새로운 크롬 창이 뜨고 해당 창에서 디버그를 진행하면 된다.

3. 디버깅

코드 중간에서 F9를 눌러 Breakpoint를 찍고, 프로그램 실행 중 해당 과정에서 Breakpoint에 멈추는지, 변수는 잘 보이는지 확인한다.