NativeScriptでは、Android、iOSともにChromeでデバッグをすることができます。(iOSはNativeScript ver3.3より対応しています) ネイティブ部品の属性をChromeで変更できたり、TypeScriptのコードに直接ブレークポイントを張ってオブジェクトの中身を見たりすることができるので、デバッグが捗ります。
準備
ChromeデバッグをiOSで行うためにはNativeScript Core ver3.3以上が必要になります。
tns info
と打って、バージョンを確認しましょう。
Chromeデバッグの開始
Chromeデバッグはとても簡単です。
プロジェクトルートで以下のコマンドを打ちます
iOS
tns debug ios --chrome --simulator
Android
tns debug android --chrome --simulator
ビルドが終わると、
To start debugging, open the following URL in Chrome:
chrome-devtools://devtools/remote/serve_file/@02e6bde1bbe34e43b309d4ef774b1168d25fd024/inspector.html?experiments=true&ws=localhost:52680
のような文字が出てくるので「devtools://」以下のURLをコピーして、Chromeで開けばDebugセッションが開始されます。
Chromeデバッグが出来ない！？
なのですが、時にChromeデバッグがうまく開始されないことがあります。
コンソールを見ると以下のような文字列が。
Frontend client connected.
Backend socket created.
Backend socket closed!
どうやらWebSocketのセッションが開始してすぐに閉じてしまっているようです（涙)
まず最新のChromeを使っているか確認して、古い場合にはバージョンアップしましょう。
私の場合には、残念ながらすでにChromeの最新版を使っていました。そこで、「Chrome canary」を使うことで、無事にデバッグができるようになりました。
Happy debug!