[RN][Expo] VS Code에서 Expo 디버거 설정

 

📍 디버깅이란?

개발 단계에서 발생하는 버그의 원인을 찾아내고 수정하는 작업

 

 

 

📍 Expo 환경에서 디버깅 할 수 있는 방법

• 앱 시작 후   j  눌러 Chrome DevTools로 디버깅
• VS Code 확장을 통한 디버깅
  • Expo Tools
    (2024.03.06 기준) Expo SDK 49, 50인 경우 Expo Tools에서 오류
    (2024.03.07 기준) 해당 오류 수정
  • React Native Tools
• Expo 시작된 터미널에서  shift+m  눌러서 React DevTools로 디버깅
• 개발자 메뉴
• react-native-debugger 설치하여 디버깅

 

 

📍 Expo Tools

Visual Studio Code에서 Expo 프로젝트를 쉽게 관리하고 디버깅하는 데 도움을 주는 확장 프로그램.

 

Expo Go와 expo-dev-client를 모두 지원

( 단,  Expo Go는 제한적으로 작동하므로 expo-dev-client 권장 )

 

1.  Expo Tools 설치

VS Code 확장: 마켓 플레이스에서 Expo Tools를 설치한다.

 

2.  디버거 구성 및 실행

Expo Tools로 디버깅 시작하는 두가지 방법이 있다.

 

2-1. VS Code 명령어 팔레트

 npx expo start 로 Metro 실행 후 앱 연결

→ VS Code 명령어 팔레트 열기 (  Ctrl + Shift + p  또는  Cmd ⌘ + Shift + p  )

→ Expo: Debug ... 클릭하면 연결됨

 

 

2-2. launch.json로 디버거 구성

구성추가 > Expo: Debug app on device or emulator

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

설정한 세팅을 선택하고, 초록색 재생 버튼(혹은 F5)을 눌러 디버깅을 시작

 

 

 

📍 React Native Tools

Visual Studio Code에서 React Native 애플리케이션 개발을 돕는 확장 프로그램.

 

1.  React Native Tools 설치 및 설정

VS Code 확장: 마켓 플레이스에서 React Native Tools를 설치한다.

 

 

2.  디버거 구성

launch.json 파일 만들기를 클릭

 

React Native Direct - Experimental 클릭하면 루트 디렉토리에 .vscode/launch.json 생성됨

( .gitignore 에 .vscode/ 디렉토리 추가 )

 

 

구성추가 >  React Native > Attach to application >  Application in direct mode(Hermes) > Hermes engine > address 및 port

Application in direct mode(Hermes) - Expo SDK 48이상

{
  "name": "Attach to Hermes application - Experimental",
  "request": "attach",
  "type": "reactnativedirect",
  "cwd": "${workspaceFolder}"
}

 

 

3.  디버거 실행

npx expo start  로 Metro 실행 후 앱 연결

→ 설정한 세팅을 선택하고, 초록색 재생 버튼(혹은 F5)을 눌러 디버깅을 시작

 

 

 

참고

https://docs.expo.dev/debugging/tools/

Debugging and profiling tools

 

https://marketplace.visualstudio.com/items?itemName=msjsdiag.vscode-react-native#debug-on-expo-go

React Native Tools - Visual Studio Marketplace

 

https://marketplace.visualstudio.com/items?itemName=expo.vscode-expo-tools

Expo Tools - Visual Studio Marketplace