调试 NativeScript 插件的指南

debug nativescript plugins

您是否曾经想过，“我能在多大程度上开发 NativeScript 应用及其插件的完整源代码？”您可能已经知道，NativeScript 框架提供了完整的原生平台（iOS/Android）API 访问。这很好，但对于您不可避免地将要执行的任务，即调试“极端情况”的 bug，并且您必须深入了解插件代码的原生 Objective-C/Java 代码，这意味着什么呢？答案是响亮的“是的，您可以！”。但下一个问题是，“如何？”

这就是我将尝试回答的问题，并向您介绍一种调试插件原生源代码的全新方法。

介绍 nativescript-dev-debugging

今天，我想向您介绍 nativescript-dev-debugging，这是一个可以下载的 npm 包。

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

此包与其他 NativeScript npm 包不同，因为它不提供任何 UI、行为或代码编译/打包功能。但它确实提供了一些东西，最适合描述为工作流程。好的，您可能问“什么是工作流程？”

工作流程由一组经过精心安排且可重复的业务活动组成，这些活动由将系统组织成将材料转化为服务、提供服务或处理信息的资源的过程所驱动。（维基百科）

nativescript-dev-debugging 提供的正是这种功能，专门用于调试 NativeScript 插件。在其核心功能中，该包基本上为您执行以下五个步骤：

构建 NativeScript 插件的原生源代码。假设您的插件正在使用一个 .aar 文件和一个 .framework 文件，并且您拥有它们的源代码（由不同的原生 iOS 和 Android 团队创建）
在您正在调试的平台的 IDE 中打开该源代码——对于 iOS 为 Xcode，对于 Android 为 Android Studio
将构建过程的输出从步骤 1 移动到 NativeScript 插件的结构中
重新构建您的“测试”应用程序，该应用程序已设置为使用 NS 插件的符号链接
触发自定义的“文件监视器”，当任何 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 命令的效果

execute nd.run command

成功安装和配置该包后，您将使用的主 npm 脚本命令是 nd.run。此命令以交互式的方式提供所有功能，以便您可以轻松地选择要启动的工作流程，以便在工作中的特定时间执行。以下是提供的当前工作流程，iOS 有两个，Android 有两个

demo ios simulator attach - 重新构建您的 iOS 测试应用程序，重新构建插件的原生源代码并准备在 Xcode 中对其进行调试（当您只想在原生代码中击中断点并更改 NS 应用程序本身的源代码时很有用）。
demo ios simulator attach & watch - 重新构建您的 iOS 测试应用程序，重新构建插件的原生源代码，监视其更改并准备在 Xcode 中对其进行调试（当您想要在插件代码的原生源代码中开发新功能时很有用）。
demo android simulator attach - 重新构建您的 Android 测试应用程序，重新构建插件的原生源代码并准备在 Android Studio 中对其进行调试（当您只想在原生代码中击中断点并更改 NS 应用程序本身的源代码时很有用）。
demo android simulator attach & watch - 重新构建您的 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 插件种子建议的那样），则可以避免此步骤。

首先，我们需要下载 tns-core-modules 和 tns-core-modules-widgets 的相应存储库。您可以从这里和这里下载。确保将它们都下载到桌面上的同一目录中，该目录名为 ns-dev-debugging，这样以下命令才能正常工作。这两个存储库都提供了一个“开发人员工作流程”，建议您在继续之前阅读它们，但不是必需的。
下载完主 NativeScript 存储库后，导航到其 tns-core-modules 目录，在终端中打开它并执行 TypeScript 编译器。从 NativeScript 存储库的根目录执行：cd NativeScript/tns-core-modules/ && tsc
转到 apps 目录，并使用 npm 安装先前编译的本地 tns-core-modules：cd ../apps/ && npm i ../tns-core-modules/
转到 tns-core-modules-widgets 存储库的根目录，并执行其 build.sh 脚本。这将构建所有必需的资产，并创建一个 dist 目录，其中包含插件的本地副本：cd ../../tns-core-modules-widgets && bash build.sh
返回 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

就是这样！您完成了。开发插件应该已使用本地 n.debug.config.json 文件安装，您现在应该在 tns-core-modules 的 package.json 文件中看到所有 nd.* npm 脚本命令。

让我们看看通过运行 $ 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，它将通过提示引导您完成要启动的工作流程。

execute simple nd run

执行任何将运行您的“测试应用程序”的命令后，Xcode 或 Android Studio 将自动打开，其中包含您的插件的本机源代码。要启动调试会话，您需要附加到测试应用程序的进程。

对于 iOS，在 Xcode 打开后，只需转到菜单 调试 > 附加到进程，找到测试应用程序的 ID（要查找 ID，请在 NativeScript 应用程序的 package.json 中查找“id”标签）并选择它

ios attach to process

对于 Android，在 Android Studio 打开后，单击位于顶部选项卡栏菜单右侧的 将调试器附加到 Android 进程图标。确保启用 显示所有进程复选框，以便显示您的应用程序的进程

android attach to process

总结

如果您已经读到这里，感谢您阅读这篇扩展的博客文章！希望您觉得它有用，并且它将帮助您开发所有酷炫的 NativeScript 插件（以及将来将要开发的插件）。

您可以在 nativescript-dev-debugging 存储库中找到插件的源代码，并且我们始终欢迎您的贡献！

免责声明： 本博客文章是在 nativescript-dev-debugging 插件版本 1.0.0 时编写的。如果您在该版本之后阅读本文，可以在变更日志中找到任何重大更改。