드디어

vscode 익스텐션 디버거를 expo에 붙였다.
지금까지는 expo 내장 디버거를 켜서 크롬 디버거로 보았다.
하지만 디버깅을 위해 VS Code에서 나가 크롬 디버거로 이동하는 과정이 번거로워서 VS Code에서 디버그하고 싶었다.

Debug on expo-dev-client

우선 VS Code 익스텐션인 React Native Tools의 문서를 보았다.

expo development build 모드 혹은 bare workflow 모드에서 개발 중이라면 Debug on expo-dev-client를 봐야한다.

위에 나온 순서대로 따라했다.
나는 android로 eas build까지 해놓았기 때문에 프로젝트 내에 android폴더도 잘 있고 해서 5번부터 시작했다.

npx expo start --dev-client

그리고 a를 눌러 android 에뮬레이터에서 앱을 실행한 뒤
m을 눌러 개발 메뉴를 열고 크롬 디버거를 열었다.
그러면 7번을 보면 크롬 디버거가 나오고 나면 status가 Status: Debugger session active로 바뀔 때까지 기다렸다가 디버거를 닫으라고 하는데 난 저 status가 전혀 뜨지 않았다. 음 아무튼 그래도 디버거는 잘 열렸으니 크롬 디버거를 끄고 ./.vscode/launch.json에 아래 내용을 추가했다.

    "configurations": [
        {
            "name": "Attach to Hermes application",
            "request": "attach",
            "type": "reactnativedirect",
            "cwd": "${workspaceFolder}"
        }
    ]

그러고 나니 VS Code 왼쪽 디버그 메뉴 상단에 Attach to Hermes application라는게 추가되었다. 그리고 실행버튼을 눌러 해당 명령어를 실행했는데... 앱을 리로딩해도 브레이크 포인트가 동작하지 않았다.

실패!

launch.json에서 Add Configuration...

여기서 ./.vscode/launch.json에 설정을 추가하는게 실행할 명령어를 추가한다는 것을 알았고

launch.json에서 Add Configuration... 버튼을 누르면

위처럼 설정과정을 도와주는 박스가 나온다.

React Native로 개발하니 React Native를 눌러보았다.

이렇게 선택지가 나오는데 Debug application을 누르고

platform을 선택해야 하는데 지금 가려진 부분이 Android이다.
이때 나는 Android와 Exponent를 선택해보았지만 둘 다 되지 않았다.

사실 처음에 멘토님과 디버거 설정을 할 때 정확히 이 과정을 했었는데, 그 당시에는 이렇게 설정하는게 어떤 의미인지 몰랐어서 문서의 Getting started를 따라만 했다가 제대로 되지 않아 다른 방법을 알아보았었다.

이번엔 왜 안되는지 천천히 확인해보니

Android일 경우 APK경로를 찾을 수 없다라는 에러가 떴었는데 여기서 유추하자면 지금처럼 Metro가 JS파일을 번들링해서 넘겨주는 방식으로는 디버그가 불가능하고 apk형식으로든 빌드가 다 된 상태여야 가능한 옵션인 것 같았다.

Exponent를 선택해도 되지 않는다.
Exponent라는 이름이 생소해 검색해보니 Expo 서비스 전체를 칭하는 말인 것 같다. Expo의 예전 이름이라던가 그런 것 같기도 하다.

어찌되었건 Exponent를 선택해서 설정을 추가하고,

디버그 메뉴를 다시 보면 Debug Exponent Hermes가 생겨있고, 이 명령어를 실행하면

Expo app을 exp://127.0.0.1:19000라는 로컬 ip에 열라고 한다.
하지만 uri을 보면 exp로 시작하는데 이는 expo go의 로컬 서버 uri이다.
expo development build의 경우 Metro는 http로 개발 서버가 열린다.

그래서 처음에 선택할 때 react native를 선택하면 안되고

Expo: Debug app on device or emulator를 선택해야 한다.
(왜 이것인지 알았냐면 Add configuration... 눌러서 나오는 선택지 중 Expo 관련된게 없나 찾아보고 가능한건 다 시도해보다가 알았다.)

그러면 configuration에 다음과 같은게 추가된다.

    {
      "type": "expo",
      "request": "attach",
      "name": "Debug Expo app",
      "projectRoot": "${workspaceFolder}",
      "bundlerPort": "8081",
      "bundlerHost": "127.0.0.1"
    },

정확힌 모르지만 request가 attach이고 bundler의 port와 host가 나와있는 것으로 보아 열려있는 개발 서버에 디버거를 붙이는 형태의 명령어를 실행하는 것 같았다. attach한다는 것은 잘 모르겠지만 일단 host와 port가 로컬 expo 개발 서버와 일치한다는 점에서 가능성이 높아보였다.

실제로

npx expo start --dev-client

개발 서버 켠 뒤
해당 디버그 명령어 Debug Expo app를 실행하면 VS Code에서 디버거가 잘 동작한다. 브레이크 포인트도 잘 잡힌다!!