はじめに

NativeScript のデバッグ方法について整理した。

TL;DR

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. iOS
      1. Chrome でのデバッグ
      2. NativeScript Inspector でのデバッグ
      3. 起動直後にブレーク
      4. 実機デバッグ
      5. iOS Runtime のデバッグ
      6. NativeScript debugger was not able to get inspector socket となる場合
    2. Android
    3. VSCode
  5. まとめ
  6. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
ProductName:	Mac OS X
ProductVersion: 10.15.3
BuildVersion: 19D76

$ node -v
v12.7.0

$ npm -v
6.10.3

$ npm ls -g @vue/cli @vue/cli-init
/Users/foo/.nodenv/versions/12.7.0/lib
├── @vue/cli@4.2.2
└── @vue/cli-init@4.2.2

$ tns --version
6.4.0

$ grep -C1 version package.json
"tns-ios": {
"version": "6.0.1"
},
"tns-android": {
"version": "6.0.0"
}

$ sudo gem list --local | grep -e xcode -e cocoa
cocoapods (1.8.4)
cocoapods-core (1.8.4)
cocoapods-deintegrate (1.0.4)
cocoapods-downloader (1.3.0)
cocoapods-plugins (1.0.0)
cocoapods-search (1.0.0)
cocoapods-stats (1.1.0)
cocoapods-trunk (1.4.1)
cocoapods-try (1.1.0)
xcodeproj (1.14.0)

$ xcodebuild -version
Xcode 11.3.1
Build version 11C504

$ echo $JAVA_HOME
/Library/Java/JavaVirtualMachines/jdk1.8.0_221.jdk/Contents/Home
  • iPhone 11 Pro: iOS 13.3
  • Android HUAWEI nova lite 2: Android 9 (ビルド 9.1.0.160)

詳細

Debugging に詳細が書かれている。

iOS

tns debug ios で、Chrome や NativeScript Inspector (Safari のウェブインスペクタ相当)を利用したデバッグが可能。

以降はエミュレータ前提で記述(--emulator オプションを利用)。

Chrome でのデバッグ

tns debug ios --emulator を実行。

しばらく待つと chrome-devtools://devtools/xxxx が表示されるのでコピー。

1
2
3
4
5
6
7
8
9
10
11
12
13
$ tns debug ios --emulator
Searching for devices...
Preparing project...
...
NativeScript debugger attached.

Setting up debugger proxy...
Press Ctrl + C to terminate, or disconnect.

Opened localhost 41000
To start debugging, open the following URL in Chrome:
chrome-devtools://devtools/bundled/inspector.html?experiments=true&ws=localhost:41000
...

Chrome のアドレスバーに貼り付けて移動。あとはいつも通りに Sources タブでブレークポイントを設定したり、Elements タブで要素を変更したりできる。

NativeScript Inspector でのデバッグ

tns debug ios --emulator --inspector を実行。

しばらく待つと自動で NativeScript Inspector が起動する。

1
2
3
4
5
6
7
$ tns debug ios --emulator --inspector
Searching for devices...
Preparing project...
...
NativeScript debugger attached.
Using inspector from cache.
...

あとはいつも通りに Elements, Debugger, Console などのタブでデバッグ。

起動直後にブレーク

--debug-brk オプションを利用

1
$ tns debug ios --emulator --debug-brk

実機デバッグ

※自分の環境では、Chrome でも NativeScript Inspector でもソースコードや各要素、ログが表示されなかったので、手順誤りや設定漏れがあるかも。

実機を接続し tns device で確認。

1
2
3
4
5
6
7
8
9
$ tns device

Connected devices & emulators
Searching for devices...
┌───┬───────────────────────────┬──────────┬──────────────────────────────────────┬──────────┬───────────┬─────────────────┐
│ # │ Device Name │ Platform │ Device Identifier │ Type │ Status │ Connection Type │
│ 1 │ iPhone │ iOS │ 01234567-89ABCDEF01234567 │ Device │ Connected │ USB │
│ 2 │ iPad Air (3rd generation) │ iOS │ 01234567-89AB-CDEF-0123-456789ABCDEF │ Emulator │ Connected │ Local │
└───┴───────────────────────────┴──────────┴──────────────────────────────────────┴──────────┴───────────┴─────────────────┘

--device <device id> --inspector を指定。その他はエミュレータ同様、--debug-brk など必要なオプション指定して実行。
※NativeScript-Vue を使っている場合 --bundle オプションも必要かも

1
2
3
$ tns debug ios --bundle --device 01234567-89ABCDEF01234567 --inspector
Searching for devices...
Your application will be deployed only on the device specified by the provided index or identifier.

シミュレータ未起動で実機接続している場合は --device <device id> は無くても良い。

1
$ tns debug --bundle --inspector

iOS Runtime のデバッグ

ランタイムエラーが発生するケースで、より詳細なデバッグ情報が必要な場合の話。

ios-runtime ライブラリを ビルド/デバッグ することができる、詳しくは下記を参照。

NativeScript debugger was not able to get inspector socket となる場合

以下のエラーが表示される場合、環境によっては --timeout 90 を追加すると改善するかもしれない。
参考: Error: NativeScript debugger was not able to get inspector socket port. · Issue #188 · NativeScript/nativescript-vscode-extension

1
2
NativeScript debugger was not able to get inspector socket port on device 01234567-89ABCDEF01234567 for application com.example.your.app.
Cannot connect to device socket. The error message is 'Device socket port cannot be found.'.

Android

tns debug android で、iOS 同様に Chrome を利用したデバッグが可能。

コマンドや使い方は、基本的に iOS と同じため省略。

1
2
3
4
5
# エミュレータ
$ tns debug android --emulator

# 実機
$ tns debug android --device 01234567-89ABCDEF01234567

VSCode

VSCode の拡張機能を使ったデバッグも可能な模様(未確認)
参考: NativeScript Extension for Visual Studio Code - NativeScript Docs

まとめ

参考文献

関連記事