[vscode] VSCode 에서 React Live debug 설정하기

VSCode에서 React 코드를 작성할 때, 코드가 변경됨을 실시간으로 크롬으로 확인할 수 있는 방법이다.

 

 

1. Debugger for chrome extension 설치

좌측의 extension 버튼 클릭 후, chrome을 검색하여 debugger for chrome 을 설치한다.

vscode extension

2. launch.json 파일을 생성한다

.vscode 디렉토리에,  아래와 같은 내용을 가진 launch.json 파일을 생성한다.

{
    "version": "0.2.0",
    "configurations": [
        
        {
            "name": "Chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceRoot}/src"
        }
    ]
}

 

3. Terminal에서 react application을 실행한다.

npm start를 통해 react 실행

 

4. F5를 눌러 디버깅을 시작한다.

위의 설정이 완료될 경우, 자동으로 chrome 창이 켜지게 되며, src 디렉터리 내부의 코드를 수정하면 자동으로 refresh 된다.