NREのリモートデバッグ

本章もしくは節で説明する機能は、nexacro beyond 17.1.2.100バージョンで追加された機能です。

NREリモートデバッグ

NRE実行時に、Chrome、EdgeのDevices inspect機能を使用すると、実行中のアプリのデバッグが可能です。Windows、macOS、Android OSをサポートします。

開発したスクリプトとJavaScriptライブラリまでデバッグできます。 DeviceAdaptorsでインストールしたモジュールやエンジン内部のコードデバッグはサポートしません。

プロジェクト設定

Environmentのenableinspectorプロパティ値をtrueに変更します。

Android > MainActivity.java

Android studioでMainActivity.javaコード作成時にsetRPP関数を追加します。

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

アプリ配布ガイド > MainActivity.java

ローカルホストとして動作するため、IPアドレスは省略してポート番号のみを入力します。

ポート番号は変更できます。

実行設定

Windows

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

接続しようとするAndroidデバイスで、下記のような設定が必要です。

1

USBデバッグオプションの活性化

USBデバッグを有効にする方法は、各メーカーマニュアルをご参照ください。

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

2

Android studioがインポートされたデスクトップにAndroidデバイスをUSBで接続します。

AndroidデバイスによってUSB接続に制限があることがあります。

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

3

Android studioのターミナルウィンドウに下記のように入力します。

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

4

Android studioでプロジェクトを実行します。

接続されたAndroidデバイスでアプリが実行されたことを確認できます。

Android（無線接続）

接続するデバイスのようなデスクトップが同じネットワークを使用できれば、無線接続を設定できます。最初の接続設定時にはUSB接続が必要で、設定完了後はUSB接続なしでデバッグを行うことができます。

1

USBデバッグオプションの活性化

2

Android studioが設置されたデスクトップにAndroidデバイスをUSBで接続します。

3

Android studioのターミナルウィンドウに下記のように入力します。

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

5555はAndroidデバイスとデスクトップの間の通信のためのポートです。

192.168.0.58はAndroidデバイスのIPです。IP確認後、値を入力してください。

4

無線に接続されると、下記のように接続されたAndroidデバイスのIPが表示されます。

List of devices attached
192.168.0.58:5555 device

5

USBを解除します。

6

Android studioのターミナルウィンドウに下記のように入力します。

adb forward tcp:9223 tcp:9223

7

Android studioでプロジェクトを実行すると、Androidデバイスでアプリが実行されます。

Devices inspect機能の実行

1

Chromeを実行し、アドレスバーに「chrome://inspect」を入力します。

chrome://inspect

2

Configureボタンをクリックし、Target discovery settingsウィンドウを立ち上げます。

Discover network targets項目がチェックされていない場合は、該当項目をチェックしてください。

3

Target discovery settingsウィンドウに予め設定したRPPアドレス値を追加します。

4

アプリを実行すると、Remote Target項目に実行されたアプリのキー値が表示されます。

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の接続を待ちます。プロジェクトロード方式やネットワーク状態によって、該当時点に一部のファイルをダウンロードしていない状態である可能性があり、ダウンロードされていないファイルはデバッグを処理できません。

Windows、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

Android studioでMainActivity.javaのコードを作成する際、setBRK関数を追加します。

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