react 디버깅 VSC debug

리액트 공부중인데 에디터를 VSC 쓰고 있습니다.

옆에 거미모양 아이콘이 몬가 했더니..오오 디버깅 기능이구만여..

extention 먼가를 설치하면 제대로 작동한다고 하네요...

구글신 타임.... 탁탁탁

검색결과 이케 하라네여...

1. VSC의 extension 중 Debugger for chrome 를 설치합니다.

2. VSC의 debugger 탭 좌측에 거미마크를 활성화하고 루트폴더에 launch.json을 아래와 같이 작성합니다.

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

3. 브레이크 포인트를 설정하고 F5를 눌러서 디버깅모드 시작합네다. 김정은이 열차타고 가고 있어서..헉

    그러면 디버깅 모드가 아래처럼 정상적으로 나옵니다.

    좌측에서 브레이크 상태의 변수값과 콜백스택등을 확인할수 있습니다.

4. 와우 브레이크포인트에 96에 걸어놔서 걸렸죠.. 다음스텝으로 하면 디버깅 계속 진행됩니다.하하

5. debugger 탭을 활용하여 react app을 디버깅할 수 있습니다. :-) 모든벌레 잘잡길 굿잡

참고URL VSC공식유알엘이네여.. 역시나 영어의 압박..

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