React Web 크롬 디버그 모드

React 웹을 디버그 모드로 실행해서 Breakpoint 를 찍어보려고 합니다.
대략 npm run web 으로 Node.js 서버를 띄우고 나서 IDE Debug 기능이 연결된 크롬을 띄워 디버깅하는 형태로 보입니다... 흠흠

환경 (2021.06)

IntelliJ Ultimate 2021.1.2
VSCode 1.57.0

IntelliJ

1. Run/Debug Configurations 를 열고 JavaScript Debug 를 등록
   • Name : 적절히 지정
   • URL : 로컬 서버 웹주소 (ex) http://localhost:8080
   • Browser : Chrome
2. React 서버를 띄웁니다. (Run/Debug Config.. 에 npm 으로 등록하거나 npm run web)
3. Run/Debug 에서 등록한 JavaScript Debug 실행
   • 크롬이 새로 열리며 디버그 모드 시작

---

VSCode

1. 좌측 Run and Debug (Ctrl+Shift+D) 열고
2. Run and Debug 버튼 클릭
   • Select environment : Chrome 선택
   • 하면 .vscode/launch.json 이 생성 됩니다.

생성된 launch.json 내용 (직접 타이핑해서 오타가 있을지도 모름)

{
  "version": "0.2.0",
  "configruations": [
    {
      "type": "pwa-chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

3. React 서버를 띄웁니다. (Run Script: web)
4. Run and Debug 에 생성되어 있는 Launch Chrome against localhost 를 실행
   • 디버그 모드 동작이 가능한 크롬이 새롭게 시작됩니다.

별도의 플러그인이나 크롬 확장을 설치하지 않아도 디버그 모드가 정상 동작하는걸 확인 했습니다.