이번 장 또는 절에서 설명하는 기능은 넥사크로플랫폼 17.1.2.100 버전에서 추가된 기능입니다.

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

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

USB 디버깅 옵션 활성화

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

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

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

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

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

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

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

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

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

Android (무선 연결)

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

USB 디버깅 옵션 활성화

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

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

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

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

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

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

List of devices attached
192.168.0.58:5555 device

USB를 해제합니다.

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

adb forward tcp:9223 tcp:9223

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

Devices inspect 기능 실행

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

chrome://inspect

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

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

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

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

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

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

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

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

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

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

앱에서 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")
}