[React] macos에서 원격 디버깅 설정하기 (--remote-debugging-port)

준비물

 

1. Javascript Debugger(Nightly) -> Deprecated Debugger for Chrome대신 사용

2. Remote - SSH

 

작업 환경

1. windows 머신  사용

2. macos에서 windows 머신에 ssh 접속

3.  windows 콘솔 명령어를 사용하여 windows머신에 설치된 리액트 서버 활성화 (포트: 27331)

 

디버거 설정하기 (launch.json)

"configurations": [
  {
    "name": "Attach Chrome",
    "type": "pwa-chrome",
    "request": "launch",
    "port": 9223,
    "url": "http://localhost:27331",
    "webRoot": "${workspaceFolder}"
  },
]

 

9223을 포트를 리스닝해야하는데 macos에서 받아 지지 않았다. (unable to attach to browser 오류 발생되었음)

아래 명령어를 사용하여 크롬에서 수신가능한 포트를 사용할 수 있었다.

명령어를 사용하는 동안 크롬 창이 하나 켜지며 해당 크롬에서 사이트로 접속하는 경우 디버거가 활성화되었다.

좌: 일반 Chrome / 우: Debugger Chrome

 

sudo /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9223

 

이제 원없이 react 디버깅을 해보자

localhost에서 작업하는 것이 아니라 조금 불편할 수 있었지만 나름 괜찮았다.