伊藤 直子

伊藤 直子

1649276700

NativeScriptプラグインをデバッグする

ネイティブスクリプトプラグインのデバッグ

「 NativeScriptアプリとプラグインの完全なソースをどの程度開発できるのか」と疑問に思ったことはありませんか。NativeScriptフレームワークが完全なネイティブプラットフォーム（iOS / Android）APIアクセスを提供することをすでにご存知でしょう。それはすべて問題ありませんが、「コーナーケース」のバグのデバッグが必要になり、内部を調べてネイティブのObjective-C /を掘り下げる必要がある、避けられない将来の状況にとって、それはどういう意味ですか。プラグインコードのJavaコード？この質問への答えは、「はい、できます！」と響き渡ります。。しかし、次の質問「どうやって？」はどうですか？

これは私が答えようとする質問です-そしてプラグインのコードのネイティブソースコードをデバッグするためのまったく新しいアプローチを紹介します。

nativescript-dev-debuggingの紹介

今日はnativescript-dev-debugging、ダウンロードできるnpmパッケージを紹介します。

npm i nativescript-dev-debugging --save-dev

このパッケージは、アプリのUI、動作、またはコードのコンパイル/バンドルを提供しないという点で、他のNativeScriptnpmパッケージとは異なります。しかし、それはワークフローとして最もよく説明される何かを提供します。わかりました、「ワークフローとは何ですか？」と尋ねることができます。

ワークフローは、リソースを体系的に編成して、資料を変換したり、サービスを提供したり、情報を処理したりするプロセスによって可能になる、組織化された反復可能なビジネスアクティビティのパターンで構成されます。（ウィキペディア）

これは、特にNativeScriptプラグインをデバッグするnativescript-dev-debuggingタスクのために提供されるものです。そのコア機能では、パッケージは基本的に次の5つのステップを実行します。

  1. NativeScriptのプラグインのネイティブソースコードをビルドします。プラグインが.aarファイルとファイルを消費し.frameworkていて、それらのソースコード（別のネイティブiOSおよびAndroidチームが作成したもの）があるとします。
  2. デバッグしているプラ​​ットフォームに固有のソースコードをIDEで開きます-iOSの場合はXcode、Androidの場合はAndroid Studio
  3. ビルドプロセスの出力をステップ1からNativeScriptプラグインの構造に移動します
  4. NSプラグインのシンボリックリンクを使用するように設定された「テスト」アプリケーションを再構築します
  5. NativeScriptアプリコード自体またはプラグインのネイティブライブラリが変更されたときに手順1〜3を繰り返すカスタム「ファイルウォッチャー」をトリガーします

上記のシーケンスの最終製品は、NativeScriptプラグインでの作業中に開発エクスペリエンスを向上させるために使用できる「ワークフロー」です。このようなプラグインの簡単な例は、tns-core-modulesプラグインを使用するプラグインです。プラグインは、ビルド済みのファイルtns-core-modules-widgetsを保持するだけです。.aar.framework

さて、これまでに成功した場合は、「わかりました。「もの」を再構築する必要がありますが、「ワークフロー」はどうですか？」と自問する必要があります。さて、これはどのように-そしてなぜそのようなパッケージのアイデアnativescript-dev-debuggingが作成されたのかを説明するのに最適な時期です。

方法と理由（{N}オフィスの舞台裏）

NativeScriptチームの内部では、99％の人がプラグインで使用されているライブラリのネイティブコードを変更し（NativeScriptではすべてがプラグインであることを忘れないでください）、そのコードを手動で再構築し、製品を手動で移動します。そのビルドをプラグインプラットフォームディレクトリに追加し、新しい機能または修正された機能をテストするために使用されるNSアプリケーションのビルドを手動でトリガーします。ご覧のとおり、このワークフローには「手動」がたくさんあるので、「これを「手動」で自動化して、NativeScriptチーム全体がフレームワークで日常業務を行うときに同じアプローチを使用できるとしたらどうなるか」というアイデアがありました。 」。これは、すべてのチームがより生産的になり、誰もが物事がどのように行われるかのステップを知っているので、より簡単なコラボレーションを可能にすることを意味します。

当然のことながら、このワークフローの統合と自動化について何かを行うことを決定した後、すぐにこの出力をNativeScriptコミュニティ全体で利用できるようにすることを決定しました。これにより、このようなタスクに直面するすべての人が作業をより速く簡単に行えるようになり、さらにはライブラリのネイティブコードを変更することはそれほど難しくありません。

「これは情報が多すぎる」と考えている必要があります。ワークフローを教えてください。それで完了です。運が良ければ、nativescript-dev-debugging開発プラグインは、その機能を理解すれば比較的簡単に使用できます。

nativescript-dev-debugging cli

npm install nativescript-dev-debuggingまず、パッケージをインストール（）して構成し、すべての内部ビルド/ウォッチスクリプトがソースコードで機能するようにする必要があります。パッケージをインストールした後、デバッグ/開発するすべてのソースコードをビルドするために使用されるすべての「パーツ」の場所を尋ねる対話型の構成手順に従うだけです。

パッケージのインストール後に生成される構成は次のとおりです。

{
    "pluginSrcFolder": "/Users/USER/plugin_repo/src",
    "pluginPlatformFolder": "/Users/USER/plugin_repo/src/platforms",
    "pluginIosSrcFolder": "/Users/USER/plugin_repo/src-native/ios",
    "iosLibraryName": "LibraryName",
    "pluginAndroidSrcFolder": "/Users/USER/plugin_repo/src-native/android",
    "androidLibraryName": "LibraryName",
    "demoFolder": "/Users/USER/plugin_repo/demo",
    "demoAngularFolder": "/Users/USER/plugin_repo/demo-angular",
    "demoVueFolder": "/Users/USER/plugin_repo/demo-vue",
    "provisioningProfile": ""
}

.debug.config.jsonこれは、プラグインの初期設定後のすべての構成を保持するという名前のファイルの内容です。これは、NSプラグインのCIテストを有効にするために使用できますが、これについては後で詳しく説明します。

パッケージをインストールした後、プラグインpackage.jsonにいくつかの新しいnpmスクリプトコマンドがあることに気付くでしょう。nativescript-dev-debuggingこれは、パッケージのすべての魔法が生きている場所です。現在または将来、これらのコマンドを更新する必要はありません。プラグインを修正および新機能で更新すると、コマンドは自動的に維持されます。これらのコマンドは、プラグインによって維持されるワークフローの一部と見なすことができるため、ネイティブライブラリの構築方法について心配する必要はありません。

メインnd.runコマンドの実行は次のようになります。

nd.runコマンドを実行します

パッケージを正常にインストールして構成した後、使用するメインのnpmスクリプトコマンドはですnd.run。このコマンドは、インタラクティブな方法ですべての機能を提供するため、作業の特定の瞬間に開始するワークフローを簡単に選択できます。提供されている現在のワークフローは次のとおりです。iOS用に2つ、Android用に2つです。

  • demo ios Simulator attach -iOSテストアプリを再構築し、プラグインのネイティブソースコードを再構築して、Xcodeでデバッグする準備をします（ネイティブコードでブレークポイントをヒットし、NSアプリ自体のソースを変更する場合に便利です）
  • demo ios Simulator attach＆watch -iOSテストアプリを再構築し、プラグインのネイティブソースコードを再構築し、変更を監視し、Xcodeでデバッグする準備をします（プラグインのコードのネイティブソースコードで新しい機能を開発する場合に便利です）
  • デモAndroidシミュレーターアタッチ-Androidテストアプリを再構築し、プラグインのネイティブソースコードを再構築して、Android Studioでデバッグする準備をします（ネイティブコードのブレークポイントに到達し、NSアプリ自体のソースを変更する場合に便利です）
  • デモAndroidシミュレーターの接続と監視-Androidテストアプリを再構築し、プラグインのネイティブソースコードを再構築し、変更を監視し、Android Studioでデバッグする準備をします（プラグインのコードのネイティブソースコードで新しい機能を開発する場合に便利です）。

特定のコマンドをすべて覚えておく必要はありません。適切なワークフローをトリガーできる、より「インタラクティブな」方法があります。詳細については後で説明します。

nativescript-dev-debuggingの使用方法

nativescript-dev-debuggingプラグインを実際のユースケースでどのように使用できるかを見てみましょう。私の例tns-core-modulesでは、NativeScriptチームとコミュニティによって開発および保守されているパッケージを使用することにしました。始める前に、架空の目標と私たちが抱えている課題を設定しましょう。

私たちの目標： tns-core-modulesのネイティブiOSおよびAndroidコードにあると思われる問題を調査します。

課題：

  • tns-core-modulesネイティブコードをどのように構築しますか？
  • どこでどのように表示およびデバッグできますか？
  • 作業が中断されないように、ローカルの変更をそのコードに効率的かつ流暢に同期するにはどうすればよいですか？

まず、ローカルバージョンtns-core-modules、tns-core-modules-widgetsソースコード、およびテストアプリケーションを準備します。これはプラグインの要件ではないことに注意してnativescript-dev-debuggingください。NSプラグインシードが示唆するように、プラグインのソースコードのシンボリックリンクを使用してテストアプリをすでに準備している場合は回避できます。

  1. まず、tns-core-modulesとのそれぞれのリポジトリをダウンロードする必要がありますtns-core-modules-widgets。こことここからそうすることができます。以下のコマンドが最適に機能するように、両方をデスクトップのns-dev-debuggingというディレクトリの同じディレクトリにダウンロードしてください。どちらのリポジトリも「開発者ワークフロー」を提供します。続行する前にそれらを読むことをお勧めしますが、必須ではありません。
  2. メインのNativeScriptリポジトリをダウンロードした後、そのtns-core-modulesディレクトリに移動し、ターミナルで開いてTypeScriptコンパイラを実行します。NativeScriptリポジトリのルートから次のコマンドを実行します。cd NativeScript/tns-core-modules/ && tsc
  3. ディレクトリに移動し、appsnpmは以前にコンパイルされたローカルtns-core-modulesをインストールします。cd ../apps/ && npm i ../tns-core-modules/
  4. tns-core-modules-widgetsリポジトリのルートに移動し、そのbuild.shスクリプトを実行します。これにより、必要なすべてのアセットが作成され、プラグインのローカルコピーを含むdistディレクトリが作成されます。cd ../../tns-core-modules-widgets && bash build.sh
  5. tns-core-modulesソースディレクトリ（tns-core-modulesのappsディレクトリ）に戻り、npmで以前にビルドしたtns-core-modules-widgetsを再度インストールします。cd ../NativeScript/tns-core-modules/ && npm i ../../tns-core-modules-widgets/dist/package

すべてのローカルソースコードが準備され、テストアプリがセットアップされたので、nativescript-dev-debuggingプラグインをインストールして構成するだけです。

tns-core-modulesディレクトリ（これはデバッグするプラグインです）に移動n.debug.config.jsonし、次の内容のファイルを作成します（デフォルトでは、このファイルはプラグインの初期構成時に自動生成されますが、この例では、事前設定を使用します。定義された構成オプション）：

{
    "pluginSrcFolder": "/Users/‘UserNamePlaceHolder’/Desktop/ns-dev-debugging/NativeScript/tns-core-modules",
    "pluginPlatformFolder": "/Users/‘UserNamePlaceHolder’/Desktop/ns-dev-debugging/tns-core-modules-widgets/dist/package/platforms",
    "pluginIosSrcFolder": "/Users/‘UserNamePlaceHolder’/Desktop/ns-dev-debugging/tns-core-modules-widgets/ios/TNSWidgets",
    "iosLibraryName": "TNSWidgets",
    "pluginAndroidSrcFolder": "/Users/‘UserNamePlaceHolder’/Desktop/ns-dev-debugging/tns-core-modules-widgets/android",
    "androidLibraryName": "widgets",
    "demoFolder": "/Users/‘UserNamePlaceHolder’/Desktop/ns-dev-debugging/NativeScript/apps",
    "demoAngularFolder": "/Users/‘UserNamePlaceHolder’/Desktop/ns-dev-debugging/NativeScript/apps",
    "demoVueFolder": "/Users/‘UserNamePlaceHolder’/Desktop/ns-dev-debugging/NativeScript/apps",
    "provisioningProfile": ""
}

上記のディレクトリパスを環境からの実際のパスに変更する必要があることに注意してください（を変更してくださいUserNamePlaceHolder）

次に、nativescript-dev-debuggingプラグインをインストールします。

npm i nativescript-dev-debugging --save-dev

以上です！完了です。devプラグインはローカルファイルを使用してインストールされているはずです。これで、tns-core-modulesファイルにn.debug.config.jsonすべてのnpmスクリプトコマンドが表示されます。nd.*package.json

$ npm run nd.helpを実行して選択することにより、どのコマンドを使用できるかを見てみましょうmain。これにより、作業したい特定の状況のワークフローをトリガーするいくつかのスクリプトコマンドが一覧表示されます。たとえば$ npm run nd.demo.ios、プラグインのネイティブコードを表示したいが、変更を加える予定がない場合に使用できます。それに。それ以外の場合は、「コマンド」を使用することをお勧めします。$ npm run nd.runこれは、シナリオを簡単に選択できるガイド付きワークフローと、「ファイルウォッチャー」をトリガーしてネイティブソースコードを再構築する機能を提供するためです。

上記の例が何につながるかをよりよく理解するために、これらのビデオでiOSおよびAndroidで実行した場合の結果を示すこのビデオをここで見ることができます。

iOSで「nativescript-dev-debugging」を使用する
 

Androidで「nativescript-dev-debugging」を使用する


より簡単な方法！

nativescript-dev-debuggingしかし、上記の長いスクリプトコマンドを覚えていなくても、コマンドを使用する簡単な方法があります。npm run nd.run開始するワークフローに関するプロンプトを表示する最短のコマンドを覚えておくだけです。

単純なnd実行を実行します

「テストアプリ」を実行するコマンドのいずれかを実行すると、プラグインのネイティブソースコードを使用してXcodeまたはAndroidStudioが自動的に開きます。デバッグセッションを開始するには、テストアプリのプロセスにアタッチする必要があります。

iOSの場合、Xcodeを開いた後、[デバッグ]> [プロセスにアタッチ]メニューに移動し、テストアプリのIDを見つけて（IDを見つけるにpackage.jsonは、NativeScriptアプリの「id」タグを探します）、次のように選択します。

iosはプロセスにアタッチします

Androidの場合、Android Studioを開いた後、上部のタブストリップメニューの右側にある[デバッガーをAndroidプロセスにアタッチ]アイコンをクリックします。アプリのプロセスが表示されるように、必ず[すべてのプロセスを表示]チェックボックスをオンにしてください。

アンドロイドはプロセスに添付します

まとめ

ここまで進んだら、この拡張ブログ投稿を読んでいただきありがとうございます！これがお役に立てば幸いです。また、開発中の（そして将来開発される予定の）すべてのクールなNativeScriptプラグインに役立つことを願っています。

ソース：https ：//blog.nativescript.org/a-guide-to-debugging-your-nativescript-plugins/

#nativescript  #android 

What is GEEK

Buddha Community

NativeScriptプラグインをデバッグする
伊藤 直子

伊藤 直子

1649276700

NativeScriptプラグインをデバッグする

ネイティブスクリプトプラグインのデバッグ

「 NativeScriptアプリとプラグインの完全なソースをどの程度開発できるのか」と疑問に思ったことはありませんか。NativeScriptフレームワークが完全なネイティブプラットフォーム（iOS / Android）APIアクセスを提供することをすでにご存知でしょう。それはすべて問題ありませんが、「コーナーケース」のバグのデバッグが必要になり、内部を調べてネイティブのObjective-C /を掘り下げる必要がある、避けられない将来の状況にとって、それはどういう意味ですか。プラグインコードのJavaコード？この質問への答えは、「はい、できます！」と響き渡ります。。しかし、次の質問「どうやって？」はどうですか？

これは私が答えようとする質問です-そしてプラグインのコードのネイティブソースコードをデバッグするためのまったく新しいアプローチを紹介します。

nativescript-dev-debuggingの紹介

今日はnativescript-dev-debugging、ダウンロードできるnpmパッケージを紹介します。

npm i nativescript-dev-debugging --save-dev

このパッケージは、アプリのUI、動作、またはコードのコンパイル/バンドルを提供しないという点で、他のNativeScriptnpmパッケージとは異なります。しかし、それはワークフローとして最もよく説明される何かを提供します。わかりました、「ワークフローとは何ですか？」と尋ねることができます。

ワークフローは、リソースを体系的に編成して、資料を変換したり、サービスを提供したり、情報を処理したりするプロセスによって可能になる、組織化された反復可能なビジネスアクティビティのパターンで構成されます。（ウィキペディア）

これは、特にNativeScriptプラグインをデバッグするnativescript-dev-debuggingタスクのために提供されるものです。そのコア機能では、パッケージは基本的に次の5つのステップを実行します。

  1. NativeScriptのプラグインのネイティブソースコードをビルドします。プラグインが.aarファイルとファイルを消費し.frameworkていて、それらのソースコード（別のネイティブiOSおよびAndroidチームが作成したもの）があるとします。
  2. デバッグしているプラ​​ットフォームに固有のソースコードをIDEで開きます-iOSの場合はXcode、Androidの場合はAndroid Studio
  3. ビルドプロセスの出力をステップ1からNativeScriptプラグインの構造に移動します
  4. NSプラグインのシンボリックリンクを使用するように設定された「テスト」アプリケーションを再構築します
  5. NativeScriptアプリコード自体またはプラグインのネイティブライブラリが変更されたときに手順1〜3を繰り返すカスタム「ファイルウォッチャー」をトリガーします

上記のシーケンスの最終製品は、NativeScriptプラグインでの作業中に開発エクスペリエンスを向上させるために使用できる「ワークフロー」です。このようなプラグインの簡単な例は、tns-core-modulesプラグインを使用するプラグインです。プラグインは、ビルド済みのファイルtns-core-modules-widgetsを保持するだけです。.aar.framework

さて、これまでに成功した場合は、「わかりました。「もの」を再構築する必要がありますが、「ワークフロー」はどうですか？」と自問する必要があります。さて、これはどのように-そしてなぜそのようなパッケージのアイデアnativescript-dev-debuggingが作成されたのかを説明するのに最適な時期です。

方法と理由（{N}オフィスの舞台裏）

NativeScriptチームの内部では、99％の人がプラグインで使用されているライブラリのネイティブコードを変更し（NativeScriptではすべてがプラグインであることを忘れないでください）、そのコードを手動で再構築し、製品を手動で移動します。そのビルドをプラグインプラットフォームディレクトリに追加し、新しい機能または修正された機能をテストするために使用されるNSアプリケーションのビルドを手動でトリガーします。ご覧のとおり、このワークフローには「手動」がたくさんあるので、「これを「手動」で自動化して、NativeScriptチーム全体がフレームワークで日常業務を行うときに同じアプローチを使用できるとしたらどうなるか」というアイデアがありました。 」。これは、すべてのチームがより生産的になり、誰もが物事がどのように行われるかのステップを知っているので、より簡単なコラボレーションを可能にすることを意味します。

当然のことながら、このワークフローの統合と自動化について何かを行うことを決定した後、すぐにこの出力をNativeScriptコミュニティ全体で利用できるようにすることを決定しました。これにより、このようなタスクに直面するすべての人が作業をより速く簡単に行えるようになり、さらにはライブラリのネイティブコードを変更することはそれほど難しくありません。

「これは情報が多すぎる」と考えている必要があります。ワークフローを教えてください。それで完了です。運が良ければ、nativescript-dev-debugging開発プラグインは、その機能を理解すれば比較的簡単に使用できます。

nativescript-dev-debugging cli

npm install nativescript-dev-debuggingまず、パッケージをインストール（）して構成し、すべての内部ビルド/ウォッチスクリプトがソースコードで機能するようにする必要があります。パッケージをインストールした後、デバッグ/開発するすべてのソースコードをビルドするために使用されるすべての「パーツ」の場所を尋ねる対話型の構成手順に従うだけです。

パッケージのインストール後に生成される構成は次のとおりです。

{
    "pluginSrcFolder": "/Users/USER/plugin_repo/src",
    "pluginPlatformFolder": "/Users/USER/plugin_repo/src/platforms",
    "pluginIosSrcFolder": "/Users/USER/plugin_repo/src-native/ios",
    "iosLibraryName": "LibraryName",
    "pluginAndroidSrcFolder": "/Users/USER/plugin_repo/src-native/android",
    "androidLibraryName": "LibraryName",
    "demoFolder": "/Users/USER/plugin_repo/demo",
    "demoAngularFolder": "/Users/USER/plugin_repo/demo-angular",
    "demoVueFolder": "/Users/USER/plugin_repo/demo-vue",
    "provisioningProfile": ""
}

.debug.config.jsonこれは、プラグインの初期設定後のすべての構成を保持するという名前のファイルの内容です。これは、NSプラグインのCIテストを有効にするために使用できますが、これについては後で詳しく説明します。

パッケージをインストールした後、プラグインpackage.jsonにいくつかの新しいnpmスクリプトコマンドがあることに気付くでしょう。nativescript-dev-debuggingこれは、パッケージのすべての魔法が生きている場所です。現在または将来、これらのコマンドを更新する必要はありません。プラグインを修正および新機能で更新すると、コマンドは自動的に維持されます。これらのコマンドは、プラグインによって維持されるワークフローの一部と見なすことができるため、ネイティブライブラリの構築方法について心配する必要はありません。

メインnd.runコマンドの実行は次のようになります。

nd.runコマンドを実行します

パッケージを正常にインストールして構成した後、使用するメインのnpmスクリプトコマンドはですnd.run。このコマンドは、インタラクティブな方法ですべての機能を提供するため、作業の特定の瞬間に開始するワークフローを簡単に選択できます。提供されている現在のワークフローは次のとおりです。iOS用に2つ、Android用に2つです。

  • demo ios Simulator attach -iOSテストアプリを再構築し、プラグインのネイティブソースコードを再構築して、Xcodeでデバッグする準備をします（ネイティブコードでブレークポイントをヒットし、NSアプリ自体のソースを変更する場合に便利です）
  • demo ios Simulator attach＆watch -iOSテストアプリを再構築し、プラグインのネイティブソースコードを再構築し、変更を監視し、Xcodeでデバッグする準備をします（プラグインのコードのネイティブソースコードで新しい機能を開発する場合に便利です）
  • デモAndroidシミュレーターアタッチ-Androidテストアプリを再構築し、プラグインのネイティブソースコードを再構築して、Android Studioでデバッグする準備をします（ネイティブコードのブレークポイントに到達し、NSアプリ自体のソースを変更する場合に便利です）
  • デモAndroidシミュレーターの接続と監視-Androidテストアプリを再構築し、プラグインのネイティブソースコードを再構築し、変更を監視し、Android Studioでデバッグする準備をします（プラグインのコードのネイティブソースコードで新しい機能を開発する場合に便利です）。

特定のコマンドをすべて覚えておく必要はありません。適切なワークフローをトリガーできる、より「インタラクティブな」方法があります。詳細については後で説明します。

nativescript-dev-debuggingの使用方法

nativescript-dev-debuggingプラグインを実際のユースケースでどのように使用できるかを見てみましょう。私の例tns-core-modulesでは、NativeScriptチームとコミュニティによって開発および保守されているパッケージを使用することにしました。始める前に、架空の目標と私たちが抱えている課題を設定しましょう。

私たちの目標： tns-core-modulesのネイティブiOSおよびAndroidコードにあると思われる問題を調査します。

課題：

  • tns-core-modulesネイティブコードをどのように構築しますか？
  • どこでどのように表示およびデバッグできますか？
  • 作業が中断されないように、ローカルの変更をそのコードに効率的かつ流暢に同期するにはどうすればよいですか？

まず、ローカルバージョンtns-core-modules、tns-core-modules-widgetsソースコード、およびテストアプリケーションを準備します。これはプラグインの要件ではないことに注意してnativescript-dev-debuggingください。NSプラグインシードが示唆するように、プラグインのソースコードのシンボリックリンクを使用してテストアプリをすでに準備している場合は回避できます。

  1. まず、tns-core-modulesとのそれぞれのリポジトリをダウンロードする必要がありますtns-core-modules-widgets。こことここからそうすることができます。以下のコマンドが最適に機能するように、両方をデスクトップのns-dev-debuggingというディレクトリの同じディレクトリにダウンロードしてください。どちらのリポジトリも「開発者ワークフロー」を提供します。続行する前にそれらを読むことをお勧めしますが、必須ではありません。
  2. メインのNativeScriptリポジトリをダウンロードした後、そのtns-core-modulesディレクトリに移動し、ターミナルで開いてTypeScriptコンパイラを実行します。NativeScriptリポジトリのルートから次のコマンドを実行します。cd NativeScript/tns-core-modules/ && tsc
  3. ディレクトリに移動し、appsnpmは以前にコンパイルされたローカルtns-core-modulesをインストールします。cd ../apps/ && npm i ../tns-core-modules/
  4. tns-core-modules-widgetsリポジトリのルートに移動し、そのbuild.shスクリプトを実行します。これにより、必要なすべてのアセットが作成され、プラグインのローカルコピーを含むdistディレクトリが作成されます。cd ../../tns-core-modules-widgets && bash build.sh
  5. tns-core-modulesソースディレクトリ（tns-core-modulesのappsディレクトリ）に戻り、npmで以前にビルドしたtns-core-modules-widgetsを再度インストールします。cd ../NativeScript/tns-core-modules/ && npm i ../../tns-core-modules-widgets/dist/package

すべてのローカルソースコードが準備され、テストアプリがセットアップされたので、nativescript-dev-debuggingプラグインをインストールして構成するだけです。

tns-core-modulesディレクトリ（これはデバッグするプラグインです）に移動n.debug.config.jsonし、次の内容のファイルを作成します（デフォルトでは、このファイルはプラグインの初期構成時に自動生成されますが、この例では、事前設定を使用します。定義された構成オプション）：

{
    "pluginSrcFolder": "/Users/‘UserNamePlaceHolder’/Desktop/ns-dev-debugging/NativeScript/tns-core-modules",
    "pluginPlatformFolder": "/Users/‘UserNamePlaceHolder’/Desktop/ns-dev-debugging/tns-core-modules-widgets/dist/package/platforms",
    "pluginIosSrcFolder": "/Users/‘UserNamePlaceHolder’/Desktop/ns-dev-debugging/tns-core-modules-widgets/ios/TNSWidgets",
    "iosLibraryName": "TNSWidgets",
    "pluginAndroidSrcFolder": "/Users/‘UserNamePlaceHolder’/Desktop/ns-dev-debugging/tns-core-modules-widgets/android",
    "androidLibraryName": "widgets",
    "demoFolder": "/Users/‘UserNamePlaceHolder’/Desktop/ns-dev-debugging/NativeScript/apps",
    "demoAngularFolder": "/Users/‘UserNamePlaceHolder’/Desktop/ns-dev-debugging/NativeScript/apps",
    "demoVueFolder": "/Users/‘UserNamePlaceHolder’/Desktop/ns-dev-debugging/NativeScript/apps",
    "provisioningProfile": ""
}

上記のディレクトリパスを環境からの実際のパスに変更する必要があることに注意してください（を変更してくださいUserNamePlaceHolder）

次に、nativescript-dev-debuggingプラグインをインストールします。

npm i nativescript-dev-debugging --save-dev

以上です！完了です。devプラグインはローカルファイルを使用してインストールされているはずです。これで、tns-core-modulesファイルにn.debug.config.jsonすべてのnpmスクリプトコマンドが表示されます。nd.*package.json

$ npm run nd.helpを実行して選択することにより、どのコマンドを使用できるかを見てみましょうmain。これにより、作業したい特定の状況のワークフローをトリガーするいくつかのスクリプトコマンドが一覧表示されます。たとえば$ npm run nd.demo.ios、プラグインのネイティブコードを表示したいが、変更を加える予定がない場合に使用できます。それに。それ以外の場合は、「コマンド」を使用することをお勧めします。$ npm run nd.runこれは、シナリオを簡単に選択できるガイド付きワークフローと、「ファイルウォッチャー」をトリガーしてネイティブソースコードを再構築する機能を提供するためです。

上記の例が何につながるかをよりよく理解するために、これらのビデオでiOSおよびAndroidで実行した場合の結果を示すこのビデオをここで見ることができます。

iOSで「nativescript-dev-debugging」を使用する
 

Androidで「nativescript-dev-debugging」を使用する


より簡単な方法！

nativescript-dev-debuggingしかし、上記の長いスクリプトコマンドを覚えていなくても、コマンドを使用する簡単な方法があります。npm run nd.run開始するワークフローに関するプロンプトを表示する最短のコマンドを覚えておくだけです。

単純なnd実行を実行します

「テストアプリ」を実行するコマンドのいずれかを実行すると、プラグインのネイティブソースコードを使用してXcodeまたはAndroidStudioが自動的に開きます。デバッグセッションを開始するには、テストアプリのプロセスにアタッチする必要があります。

iOSの場合、Xcodeを開いた後、[デバッグ]> [プロセスにアタッチ]メニューに移動し、テストアプリのIDを見つけて（IDを見つけるにpackage.jsonは、NativeScriptアプリの「id」タグを探します）、次のように選択します。

iosはプロセスにアタッチします

Androidの場合、Android Studioを開いた後、上部のタブストリップメニューの右側にある[デバッガーをAndroidプロセスにアタッチ]アイコンをクリックします。アプリのプロセスが表示されるように、必ず[すべてのプロセスを表示]チェックボックスをオンにしてください。

アンドロイドはプロセスに添付します

まとめ

ここまで進んだら、この拡張ブログ投稿を読んでいただきありがとうございます！これがお役に立てば幸いです。また、開発中の（そして将来開発される予定の）すべてのクールなNativeScriptプラグインに役立つことを願っています。

ソース：https ：//blog.nativescript.org/a-guide-to-debugging-your-nativescript-plugins/

#nativescript  #android