React - 디버깅

 크롬 브라우저에서 디버깅 하기 위해선 해당 파일을 설정파일로 잡는다. 그 후 중단점을 잡고 F5를 통해 웹사이트(프론트엔드)를 실행시킨다. yarn start가 디버그 모드로 시작되는 것과 비슷하다. 특정 기능을 확인할 때면 페이지 전환이 일어나기 전까지 중단점을 풀어둔다. 해당 기능을 테스트하기 직전 상황에서 궁금한 지점에 중단점을 걸고 디버깅을 하면 된다.

// launch.json

{

    // Use IntelliSense to learn about possible attributes.

    // Hover to view descriptions of existing attributes.

    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387

    "version": "0.2.0",

    "configurations": [

        {

            "type": "chrome",

            "request": "launch",

            "name": "Launch Chrome against localhost",

            "url": "http://localhost:3000",

            "webRoot": "${workspaceFolder}"

        }

    ]

}