'ReactNative'에 해당되는 글 1건

  1. 2019.05.17 React Native : VS CODE에서 디버깅 하기 1

 

launch.json 파일 생성

  • Select Environment에서 React Native 선택
  • React Native가 나오지 않을 경우 Extensions에서 React Native Tools를 Disable → Reload → Enable 한 후 다시 선택

 

launch.json 파일 내용 추가

  • 파일 위치 : ./vscode/launch.json
{
    "name": "Attach to packager",
    "program": "${workspaceRoot}/.vscode/launchReactNative.js",
    "type": "reactnative",
    "request": "attach",
    "sourceMaps": true,
    "outDir": "${workspaceRoot}/.vscode/.react",
    "port":"8081"
},

디버거 실행

 

  • 어플리케이션 실행 - VS CODE Debug Tab - Attach to packager 선택 - Start debugging 실행

 

  • 정상 적으로 실행된 경우 나오는 CONSOLE 메세지

 

  • 실패한 경우 나오는 CONSOLE 메세지

 

어플리케이션 Debug 설정

 

  • 어플리케이션 메뉴 - Debug JS Remotely 선택

 

  • 제대로 실행되면 DEBUG CONSOLE창에 메세지와 함께 상태표시줄이 주황색으로 바뀌게 된다.
  • BreakPoint를 설정해 사용하면 된다.
Posted by L10N
: