VSCode에서 반응 디버깅

디버깅에 대한 두 번째 기사에 오신 것을 환영합니다. 디버깅에 어려움을 겪고 있다면 잘 찾아오셨습니다 😉

📚 이론의 분.

디버깅에는 두 가지 기본 유형이 있습니다.

연결(이미 실행 중인 프로세스에 연결한다는 의미)

시작 - 새 프로세스를 시작하고 연결한다는 의미입니다. 헤드리스 크롬 또는 다른 것이 될 수 있음)

몇 가지 기본 사항을 이해한 후 실제 구성으로 이동하겠습니다.

1) 프로젝트 루트에 있는 .vscode/launch.json의 구성 배열 내에 구성 개체를 추가합니다.

{
  "configurations": [
    {
      "name": "Launch Chrome",
      "request": "launch",
      "type": "chrome",
      "url": "http://localhost:8080", // localhost where we will launch our front-end
      "webRoot": "${workspaceFolder}"
    },
  ]
}

💡 Tip: You can generate the same code by pressing the "Add configuration" button in VSCode bottom right corner.

After clicking the button, you will see a context menu where you should choose Chrome launch.

And here we go! You will get the same config as in step #1 😎

2) 그런 다음 왼쪽 상단에서 VSCode의 Run and debug menu 내부 구성을 시작하는 옵션을 선택합니다.


3) 결과적으로 지정된 포트에서 해제된 애플리케이션을 볼 수 있습니다!

VSCode 디버거의 컨트롤러에 대한 다음 문서에서 뵙겠습니다 🥳