NRE 원격 디버깅

NRE 원격 디버깅

NRE 실행 시 크롬, Edge 브라우저의 Devices inspect 기능을 사용해 실행 중인 앱 디버깅을 할 수 있습니다. 윈도우, macOS, Android 운영체제를 지원합니다.

개발한 스크립트와 자바스크립트 라이브러리까지 디버깅을 할 수 있습니다. DeviceAdaptors로 설치한 모듈이나 엔진 내부 코드 디버깅은 지원하지 않습니다.

프로젝트 설정

Environment의 enableinspector 속성값을 true로 변경합니다.

Android > MainActivity.java

안드로이드 스튜디오에서 MainActivity.java 코드 작성 시 setRPP 함수를 추가합니다.

if(bootstrapURL != null) {
	setBootstrapURL(bootstrapURL);
	setProjectURL(projectUrl);
	setRPP("9223");
}

앱 배포 가이드 > MainActivity.java

로컬호스트로 동작하기 때문에 IP 주소는 생략하고 포트번호만 입력합니다.

포트번호는 변경할 수 있습니다.

실행 설정

윈도우

nexacro.exe 실행 옵션으로 -RPP 옵션을 아래와 같이 추가하고 실행합니다.

nexacro.exe -K "INSPECTOR_TEST" -S "http://localhost:8080/start.json" -RPP 127.0.0.1:9223
nexacro.exe -K "INSPECTOR_TEST" -S "http://localhost:8080/start.json" -RPP 9223

RPP 옵션 설정 시 PORT만 설정한 경우에는 localhost 로 동작합니다.

macOS

터미널에서 실행 시 -RPP 옵션을 아래와 같이 추가하고 실행합니다.

open nexaApp.app --args -K INSPECTOR_TEST -S http://localhost:8080/start_macos.json -RPP "127.0.0.1:9223"
open nexaApp.app --args -K INSPECTOR_TEST -S http://localhost:8080/start_macos.json -RPP "9223"

RPP 옵션 설정 시 PORT만 설정한 경우에는 localhost 로 동작합니다.

Android

연결하려는 안드로이드 장비에서 아래와 같은 설정이 필요합니다.

1

USB 디버깅 옵션 활성화

USB 디버깅 옵션 활성화 방법은 각 제조사 매뉴얼을 참고해주세요.

https://developer.android.com/studio/debug/dev-options#enable

2

안드로이드 스튜디오가 설치된 데스크탑에 안드로이드 장비를 USB로 연결합니다.

안드로이드 장비에 따라 USB 연결에 제한이 있을 수 있습니다.

https://developers.google.com/web/tools/chrome-devtools/remote-debugging#troubleshooting

3

안드로이드 스튜디오 터미널창에 아래와 같이 입력합니다.

adb start-server
adb forward tcp:9223 tcp:9223

4

안드로이드 스튜디오에서 프로젝트를 실행합니다.

연결된 안드로이드 장비에서 앱이 실행된 것을 확인할 수 있습니다.

Android (무선 연결)

연결하려는 장비와 같은 데스크탑이 같은 네트워크를 사용할 수 있다면 무선 연결을 설정할 수 있습니다. 최초 연결 설정 시에는 USB 연결이 필요하며 설정 완료 후에는 USB 연결 없이 디버깅을 진행할 수 있습니다.

1

USB 디버깅 옵션 활성화

2

안드로이드 스튜디오가 설치된 데스크탑에 안드로이드 장비를 USB로 연결합니다.

3

안드로이드 스튜디오 터미널창에 아래와 같이 입력합니다.

adb kill-server
adb start-server
adb tcpip 5555
adb connect 192.168.0.58
adb devices

5555는 안드로이드 장비와 데스크탑 간의 통신을 위한 포트입니다.

192.168.0.58은 안드로이드 장비의 IP 입니다. IP 확인 후 값을 입력해야 합니다.

4

무선 연결이 됐다면 아래와 같이 연결된 안드로이드 장비 IP가 표시됩니다.

List of devices attached
192.168.0.58:5555 device

5

USB를 해제합니다.

6

안드로이드 스튜디오 터미널창에 아래와 같이 입력합니다.

adb forward tcp:9223 tcp:9223

7

안드로이드 스튜디오에서 프로젝트를 실행하면 안드로이드 장비에서 앱이 실행됩니다.

Devices inspect 기능 실행

1

크롬 브라우저를 실행하고 주소창에 "chrome://inspect" 을 입력합니다.

chrome://inspect

2

Configure 버튼을 클릭하고 Target discovery settings 창을 띄웁니다.

Discover network targets 항목이 체크되어 있지 않다면 해당 항목을 체크해줍니다.

3

Target discovery settings 창에 앞에서 설정한 RPP 주소값을 추가합니다.

4

앱을 실행하면 Remote Target 항목에 실행된 앱 key 값이 표시됩니다.

5

Target 항목 아래에 있는 inspect 링크를 클릭하면 콘솔창으로 이동하며 trace 메소드 실행 결과나 오류 발생 시 메시지를 확인할 수 있습니다.

6

open dedicated devtools for node 링크를 클릭하면 서버 리소스를 탐색할 수 있는 창을 띄울 수 있습니다.

[Sourcs > Node] 탭에서 원하는 파일을 선택하고 중단점을 추가하거나 추가적인 디버깅 작업을 수행할 수 있습니다.

Remote Target 항목에 앱이 보이지 않을때

앱 실행 후 20초 이상 앱이 표시되지 않는다면 아래와 같이 조치합니다.

1

브라우저 종료 후 다시 접속합니다.

2

앱에서 inspect 기능이 정상 실행되고 있는지 확인합니다.

앱 실행 후 브라우저에서 아래 URL로 접속하면 정보가 표시되어야 합니다. 응답이 없다면 프로젝트 설정에 문제가 있거나 다른 문제가 있을 수 있습니다.

[Target discovery settings RPP Address]/json/list
http://127.0.0.1:9223/json/list

로딩 중 멈춤 기능 옵션 설정

NRE 원격 디버깅은 실행중인 앱을 접속해서 디버깅을 실행하기 때문에 로딩 중 발생하는 오류나 현상을 디버깅할 수 없습니다. 아래와 같이 추가적인 옵션을 통해 로딩 시점에 강제적으로 멈추는 설정을 추가할 수 있습니다.

로딩 중 멈춤 기능은 테마 파일(theme.map.js) 수신 완료 시점에서 멈춘 상태로 Devices inspect 연결을 기다립니다. 프로젝트 로딩 방식이나 네트워크 상태에 따라 해당 시점에 일부 파일을 내려받지 않은 상태일 수 있으며 내려받지 않은 파일은 디버깅을 처리할 수 없습니다.

윈도우, macOS

nexacro.exe 실행 옵션으로 -brk "true" 옵션을 아래와 같이 추가하고 실행합니다.

nexacro.exe -K "INSPECTOR_TEST" -S "http://localhost:8080/start.json" -RPP 127.0.0.1:9223 -brk "true"
nexacro.exe -K "INSPECTOR_TEST" -S "http://localhost:8080/start.json" -RPP 9223 -brk "true"

macOS

터미널에서 실행 시 -brk "true" 옵션을 아래와 같이 추가하고 실행합니다.

open nexaApp.app --args -K INSPECTOR_TEST -S http://localhost:8080/start_macos.json -RPP "127.0.0.1:9223" -brk "true"
open nexaApp.app --args -K INSPECTOR_TEST -S http://localhost:8080/start_macos.json -RPP "9223" -brk "true"

Android > MainActivity.java

안드로이드 스튜디오에서 MainActivity.java 코드 작성 시 setBRK 함수를 추가합니다.

if(bootstrapURL != null) {
	setBootstrapURL(bootstrapURL);
	setProjectURL(projectUrl);
	setRPP("9223");
	setBRK("true")
}