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

2024. 3. 6. 17:49· Framework/React Native
목차
  1. 📍 디버깅이란?
  2. 📍 Expo 환경에서 디버깅 할 수 있는 방법
  3. 📍 Expo Tools
  4. 1.  Expo Tools 설치
  5. 2.  디버거 구성 및 실행
  6. 📍 React Native Tools
  7. 1.  React Native Tools 설치 및 설정
  8. 2.  디버거 구성
  9. 3.  디버거 실행
  10. 참고

 

📍 디버깅이란?

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

 

 

 

📍 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

Learn about different tools available to inspect your Expo project at runtime.

docs.expo.dev

 

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

 

React Native Tools - Visual Studio Marketplace

Extension for Visual Studio Code - Debugging and integrated commands for React Native

marketplace.visualstudio.com

 

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

 

Expo Tools - Visual Studio Marketplace

Extension for Visual Studio Code - Expo for VS Code keeps you productive with debugging, IntelliSense and prebuild previews

marketplace.visualstudio.com

 

저작자표시 (새창열림)

'Framework > React Native' 카테고리의 다른 글

[EXPO][트러블슈팅] iOS Axios Error: Network Error  (0) 2024.03.19
[Expo][트러블슈팅] Android 빌드 후 Axios Error:Network Error  (2) 2024.03.17
[RN][트러블슈팅] @react-navigation/xxx/xxx.tsx: Unexpected token  (0) 2024.03.05
[RN][Expo] Expo에 관하여..  (0) 2024.02.21
React Native CLI vs Expo  (0) 2024.02.20
  1. 📍 디버깅이란?
  2. 📍 Expo 환경에서 디버깅 할 수 있는 방법
  3. 📍 Expo Tools
  4. 1.  Expo Tools 설치
  5. 2.  디버거 구성 및 실행
  6. 📍 React Native Tools
  7. 1.  React Native Tools 설치 및 설정
  8. 2.  디버거 구성
  9. 3.  디버거 실행
  10. 참고
'Framework/React Native' 카테고리의 다른 글
  • [EXPO][트러블슈팅] iOS Axios Error: Network Error
  • [Expo][트러블슈팅] Android 빌드 후 Axios Error:Network Error
  • [RN][트러블슈팅] @react-navigation/xxx/xxx.tsx: Unexpected token
  • [RN][Expo] Expo에 관하여..
혬수
혬수
혬수
수리수리 마수리
혬수
전체
오늘
어제

블로그 메뉴

  • 🏡 Home
  • 🏷️ Tag
  • Github
  • 분류 전체보기 (52)
    • Infra (8)
      • Kubernetes (5)
      • AWS (3)
    • Operations (11)
      • Docker (1)
      • ArgoCD (2)
      • Flux (1)
      • Kafka (2)
      • Keycloak (3)
    • Testing (3)
      • Jest (0)
      • Postman (1)
    • Language (5)
      • JavaScript (5)
      • TypeScript (0)
    • Framework (16)
      • React (1)
      • React Native (15)
    • KakaoTech_Bootcamp (4)
      • Weekly Scrum (3)
      • 회고 (1)
    • Etc (5)
      • Git (1)
      • MacOS (4)

인기 글

hELLO · Designed By 정상우.v4.2.2
혬수
[RN][Expo] VS Code에서 Expo 디버거 설정
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.