如何使用 Android Studio 调试原生 React 原生库?
How to debug native react native libraries with Android Studio?
这个问题与如何调试 React-Native 应用程序的 javascript-land 无关。它是关于如何在 node_modules-folder.
中调试 native libraries(在这种情况下意味着:JAVA-代码)
虽然我很容易使用 XCode 调试 RN 应用程序的本机 iOS 部分,但我偶然发现了 Android Studio 的各种问题...
最主要的是,将项目导入 Studio 后 node_modules-Folder 不存在,为什么无法设置断点进行调试。
版本:
- Android Studio 2.2.2(当前最新版本)
- react-native 0.38.0(也是最新版本)
- gradle 1.3.1(从 react-native init 预配置)
- 也尝试升级到 gradle 2.2.2
- Android 已安装 SDK 和构建工具,最高版本 23,包括 NDK
我是怎么做到的/重现步骤
1.创建新的 React Native 项目:
react-native init debugTest
2。使用要本地调试的本地代码安装第三方库
cd debugTest &&
react-native install react-native-sqlite-storage
3。确保一切都可以在 android 端工作:
启动 GenyMotion
启动 AVD
运行终端中使用此命令的应用程序:
react-native run-android
(这将打开打包程序和传输 js-bundle 所需的所有其他内容)。
如果要省略这一步,需要手动启动打包器:
node node_modules/react-native/local-cli/cli.js start
4。启动 Android Studio
- 在即将出现的入门对话框中,选择“导入项目”
- select 项目的目录“android”,然后单击“导入”
(这些步骤取自 official RN-documentation):
If you want to use Android Studio to work on native code, from the
Welcome screen of Android Studio choose "Import project" and select
the android folder of your app.
5. Android Studio 要求将 gradle 版本 从预配置的 1.3.2 更新到 2.2.2。我首先拒绝了整个工作流程,后来我尝试了(两者对我来说没有太大区别)
6. 由于
,必须停用 Instant 运行
7.单击 Android Studio
工具栏中的“运行”或“调试”
到目前为止一切正常。我能够在 MainApplication.java::onCreate 中设置断点,然后可以进入此方法。
但问题是:
- node_modules-Folder 在 Android Studio 中不存在,无法通过这种方式进行调试。如何实现?
- 调试 onCreate-Method 并进一步向下进入 Java-Stack,经常发生 “源代码与字节代码不匹配”。
调试器挂在源代码注释中的其他地方,但不在 selected 执行的那一行。
Android 个 SDK:
我已经安装了所有 SDK、构建工具和 NDK 以及自版本 23 以来的所有其他内容:
TL;DR:
如何使用 Android Studio 调试 React Native 应用程序 node_modules-Folder 中存在的本地库,因为它们在 AS 中不可见,因此无法传递断点?
更新
我终于找到了根本原因。对我来说它没有用,因为我想调试的库没有在 Android Studio 中显示。但这是我自己的错误,因为库设置不正确,为什么 gradle 无法注意到它。
所以,这个问题可以像博客一样使用 post 如何正确地做(如果第 3 方库与“rnpm-link”开箱即用就足够了)或“react-native link”)[在我的示例中不是这种情况]
你做过rnpm link
或react-native link
吗?一旦你这样做了,就会有额外的模块连同应用程序模块,就像这样。
您可以查看本机模块中的所有 java 代码并放置断点、调试等
Bam....我现在可以自己回答这两个问题中的第一个了。感谢@agent_hunt,他让我走上了正确的方向...
在此示例应用程序中,绑定设置不正确。 "rnpm link" 和较新的 "react-native link",它是 "react-native install" 的一部分,在这里对于 android 部分没有正确工作,因为它没有在第 3 方中实现-我在这个例子中使用的库。
这就是为什么 gradle 没有注意到图书馆的原因。正确设置后,文件夹 react-native-sqlite-storage 出现在 Android Studio 中,我能够通过断点并在那里停止执行。
然而,调试这个库工作正常,但是当我不想进入 android SDK 的较低/"deeper" 方法时,它仍然有问题指向正确的代码行("Sourcecode does not match the byte code")
这个问题与如何调试 React-Native 应用程序的 javascript-land 无关。它是关于如何在 node_modules-folder.
中调试 native libraries(在这种情况下意味着:JAVA-代码)虽然我很容易使用 XCode 调试 RN 应用程序的本机 iOS 部分,但我偶然发现了 Android Studio 的各种问题... 最主要的是,将项目导入 Studio 后 node_modules-Folder 不存在,为什么无法设置断点进行调试。
版本:
- Android Studio 2.2.2(当前最新版本)
- react-native 0.38.0(也是最新版本)
- gradle 1.3.1(从 react-native init 预配置)
- 也尝试升级到 gradle 2.2.2
- Android 已安装 SDK 和构建工具,最高版本 23,包括 NDK
我是怎么做到的/重现步骤
1.创建新的 React Native 项目:
react-native init debugTest
2。使用要本地调试的本地代码安装第三方库
cd debugTest &&
react-native install react-native-sqlite-storage
3。确保一切都可以在 android 端工作:
启动 GenyMotion
启动 AVD
运行终端中使用此命令的应用程序:
react-native run-android
(这将打开打包程序和传输 js-bundle 所需的所有其他内容)。 如果要省略这一步,需要手动启动打包器:
node node_modules/react-native/local-cli/cli.js start
4。启动 Android Studio
- 在即将出现的入门对话框中,选择“导入项目”
- select 项目的目录“android”,然后单击“导入” (这些步骤取自 official RN-documentation):
If you want to use Android Studio to work on native code, from the Welcome screen of Android Studio choose "Import project" and select the android folder of your app.
5. Android Studio 要求将 gradle 版本 从预配置的 1.3.2 更新到 2.2.2。我首先拒绝了整个工作流程,后来我尝试了(两者对我来说没有太大区别)
6. 由于
7.单击 Android Studio
工具栏中的“运行”或“调试”到目前为止一切正常。我能够在 MainApplication.java::onCreate 中设置断点,然后可以进入此方法。
但问题是:
- node_modules-Folder 在 Android Studio 中不存在,无法通过这种方式进行调试。如何实现?
- 调试 onCreate-Method 并进一步向下进入 Java-Stack,经常发生 “源代码与字节代码不匹配”。
调试器挂在源代码注释中的其他地方,但不在 selected 执行的那一行。
Android 个 SDK:
我已经安装了所有 SDK、构建工具和 NDK 以及自版本 23 以来的所有其他内容:
TL;DR:
如何使用 Android Studio 调试 React Native 应用程序 node_modules-Folder 中存在的本地库,因为它们在 AS 中不可见,因此无法传递断点?
更新
我终于找到了根本原因。对我来说它没有用,因为我想调试的库没有在 Android Studio 中显示。但这是我自己的错误,因为库设置不正确,为什么 gradle 无法注意到它。
所以,这个问题可以像博客一样使用 post 如何正确地做(如果第 3 方库与“rnpm-link”开箱即用就足够了)或“react-native link”)[在我的示例中不是这种情况]
你做过rnpm link
或react-native link
吗?一旦你这样做了,就会有额外的模块连同应用程序模块,就像这样。
您可以查看本机模块中的所有 java 代码并放置断点、调试等
Bam....我现在可以自己回答这两个问题中的第一个了。感谢@agent_hunt,他让我走上了正确的方向...
在此示例应用程序中,绑定设置不正确。 "rnpm link" 和较新的 "react-native link",它是 "react-native install" 的一部分,在这里对于 android 部分没有正确工作,因为它没有在第 3 方中实现-我在这个例子中使用的库。
这就是为什么 gradle 没有注意到图书馆的原因。正确设置后,文件夹 react-native-sqlite-storage 出现在 Android Studio 中,我能够通过断点并在那里停止执行。
然而,调试这个库工作正常,但是当我不想进入 android SDK 的较低/"deeper" 方法时,它仍然有问题指向正确的代码行("Sourcecode does not match the byte code")