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");
}로컬호스트로 동작하기 때문에 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")
}