はじめに

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

TL;DR

• Chrome や NativeScript Inspector を利用したデバッグが可能
  • ブレークポイントの設定、コンソールでのログ確認、要素の変更など可能
  • Chrome DevTools Debugging
• iOS: tns debug ios
• Android: tns debug android
• VSCode の拡張機能もある(未確認)
  • NativeScript Extension for Visual Studio Code - NativeScript Docs

目次

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 ライブラリを ビルド/デバッグ することができる、詳しくは下記を参照。

• Debugging the iOS Runtime within your app’s XCode project - NativeScript Docs
• ios-runtime/README.md at master · NativeScript/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

まとめ

• Chrome や NativeScript Inspector を利用したデバッグが可能
  • ブレークポイントの設定、コンソールでのログ確認、要素の変更など可能
  • Chrome DevTools Debugging
• iOS: tns debug ios
• Android: tns debug android
• VSCode の拡張機能もある(未確認)
  • NativeScript Extension for Visual Studio Code - NativeScript Docs

参考文献

• Debugging - NativeScript Docs
• Chrome DevTools Debugging - NativeScript Docs
• tns debug - NativeScript Docs
• tns debug ios - NativeScript Docs
• tns debug android - NativeScript Docs

関連記事

• NativeScript, JsBarcode でバーコードを 生成/描画
• NativeScript でデバイスの輝度(明るさ)を制御する
• NativeScript-Vue でネイテイブアプリの開発(チュートリアル + α)
• NativeScript で生体認証(FaceID, TouchID, Android 指紋認証)
• NativeScript-Vue で QRコードの読取り
• NativeScript で入力範囲外タップでキーボードを非表示にする
• JavaScript で URL のクエリパラメータを操作する方法
• jQuery Select2 で、初期値の設定と選択状態のクリア