[React] VScode를 통해 React를 디버깅하는 방법

개시하다
이 기사는 첫 번째 프로그래머가 학습을 하면서 궁금한 점을 조사해 메모로 정리한 것이다.
따라서 글의 내용에 오류가 포함될 수 있다.용서해 주세요.
잘못을 발견한 여러분, 지적해 주십시오.
VScode로 React 디버깅하는 방법
VScode를 엽니다.F5 #### 키를 누르면 다음 목록이 표시됩니다.
목록에서 Chrome를 선택합니다.

그리하여폴더에 launch가 있습니다.json 파일을 만듭니다.

launch.json 파일의 내용을 다음과 같이 고칩니다.
launch.json

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

이로써 VSCODE의 디버깅 준비가 완료되었습니다.F5 버튼을 누르면 다음 화면이 표시됩니다.

서버가 시작되지 않았기 때문에 터미널에서 실행하십시오 npm　start.
단말기

$ npm　start

이렇게 하면 화면이 정상적으로 표시될 것이다.
이상의 조작을 통해 아래 그림처럼 인터럽트로 처리를 중지하거나 디버그 컨트롤러에 출력할 수 있습니다.