vscode로 반응 앱을 디버깅하는 방법

2553 단어
vscode에서 반응 애플리케이션을 디버깅하기 위해 이제 vscode에는 디버깅에 필요한 모든 기능이 포함되어 있으므로 더 이상 확장을 설치할 필요가 없습니다.

반응 애플리케이션을 디버깅하는 데 사용한 단계는 다음과 같습니다.
  • 반응 프로젝트는 create-react-app로 생성되었으며 기본적으로 포트 3000에서 실행되었습니다.
  • 먼저 실행 및 디버그 보기로 이동하여 launch.json 구성 파일을 만들고(아직 없는 경우) 유형으로 Chrome를 선택합니다.
  • 이제 앱이 포트 3000에서 실행 중이므로 url 매개변수의 포트를 8080 대신 3000으로 변경합니다.
  • 일부 중단점을 설정한 다음 실행을 클릭하면 앱의 디버그 인스턴스가 시작되어야 합니다.

  • 최종 launch.json 구성 파일은 다음과 같습니다. Edge를 사용하고 있기 때문에 제 경우에는 유형이 다릅니다.

    {
      // 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": "pwa-msedge",
          "request": "launch",
          "name": "Launch Edge against localhost",
          "url": "http://localhost:3000",
          "webRoot": "${workspaceFolder}"
        }
      ]
    }
    
    

    좋은 웹페이지 즐겨찾기