Android - ReactNative Debug 技巧

Android - ReactNative Debug 技巧

---

前言

因为旧的项目使用了 RN，在修复 Bug 的时候，很难定位问题，在 Debug 的时候花费了大量的时间。今天小结下 Debug 技巧，以备日后使用。

笔者是 Android 程序员，因此总结 Android 和 ReactNative 之间的 Debug。

官网有介绍 ReactNative 的 Debug 技巧。如英文官网： https://reactnative.dev/docs/debugging 或者中文官网 https://reactnative.cn/docs/debugging.html 。 然而事情并没有那么简单，还是有些坑需要踩的。

---

开发环境配置

我的开发环境： AndroidStudio、WebStorm、RN 0.51 。

因此如果你是一名新手 RN 程序员在调试 Androd 程序，需要注意一下几点：

1. Android 手机打开开发者选项，打开 USB 调试。

2. 首先要做的就是使用 AndroidStudio 仅打开 Android 工程，配置好环境，例如配置 Android SDK 路径的路径，下载同步项目的依赖（没代理的话，gradle 最好配置阿里云的镜像）。先使用 AndroidStudio 让项目能跑起来，启动后闪退或者白屏也没关系。AndroidStudio 是专业的开发 Android 的 IDE ，当你的环境配置出错时，给出的错误提示信息更加全面，跑起来闪退/白屏是因为你还没有配置好 RN 相关的环境。

3. 注意 Node.js 版本与你项目的 RN 版本，开发 RN 需要下载并配置 Node.js，在 Node.js 官网 中显示最新版本为 14.7.0，长期支持版本（LTS）为 12.18.3。一般下载软件，一般都下载稳定版本或 LTS 版本，因为出现问题的时候，可查询资料比较多。结果我就发现一个坑爹的事，项目中 RN 版本为 0.51 ，Mac 使用最新版本 Node.js 可以跑起来，而 Windows 却报错，查询资料后，将 Windows 版本回退到 12.10 版本，才编译通过。

4. Web 前端开发人员在开发的时候喜欢使用 VSCode，而我使用 WebStrom 更加顺手。Android 项目的配置已经配置完毕，但是你未必跑得起来，因为 RN 环境还没配置呢，Node.js 配置好后，一般在 RN 工程根目录（pakcage.json 所在的目录）执行 npm install -g react-native-cli 和 npm install ，此时是下载依赖包到 node_modules 目录，这个过程未必会一帆风顺，一般情况下需要配置代理或者设置淘宝镜像，否则下载速度很慢。下载完之后，要注意看 npm install 过程中有没有报 error 。

5. 接下来使用 WebStorm 打开整个 RN 工程。配置启动 Android （不配置也可以，使用命令行就可以运行，但是这样更方便）：
   

点击左上角的 + 号，然后在弹出的列表中选择 ReactNative 单击：

为你的启动配置起个名字，默认名称为 Untitle，可以命名为 Android：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XQFZ8QEX-1605061685086)(http://img.hi-cat.cn/a7fea18551c03d20d6114ca9a19a8e4b)]

在 Mac 中，如果你的 node 环境和 ReactNative 环境已经配置好，那么配置中的 Node interpreter 以及 React Native package 路径应该会自动显示。如果还是没找到，就排查下环境或者手动指定吧。

React Natice 默认的启动端口为 8081，这个端口很容易被占用，如果在启动 RN 前，8081 端口已经被占用，那么 RN 工程启动会报错，端口被占用。这种错误常见于命令行启动了 RN 后，又打开了一个命令行启动 RN，或者又使用 Webstorm 的配置启动 RN。要么直接关掉占用端口的工程，要么命令行查找后，kill 掉。

Mac 排查端口占用的方法：找到占用端口的进程，然后 kill 掉找到的 pid：

sudo lsof -i:8081
kill -9  <pid>

Windows 下同理：

netstat -ano | findstr :8081
taskkill /PID <processid> /F

配置好后，点击左上角的启动即可：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LTjcwN0E-1605061685087)(http://img.hi-cat.cn/63ba923db02ee6d20a36893a71b505fd)]

4. 编译通过了，安装成功了，如果 Android 程序却没有跑起来，需要手动点击 App 图标，才能跑起来，WebStorm 控制台提示：

Error: Activity class {com.rn_test/com.rn_test.MainActivity} does not exist.

这是因为旧版本 CLI 默认启动的是 MainActivity 类，而你的 Android 工程中，在 AndroidManifest.xml 文件中，入口 Activity 声明的不是 MainActivity，例如你声明的是 LauncherActivity，如下：

      <activity
        android:name=".LauncherActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
        android:launchMode="singleTask"
        android:windowSoftInputMode="adjustResize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>

因此，你要手动指定启动 Activity，注意这里的写法：

react-native run-android --main-activity  LauncherActivity

或者配置中，配置启动参数：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-txnjS3sL-1605061685088)(http://img.hi-cat.cn/5efb776b0910cef17eebbfbf25951723)]

---

启动之后的配置

1.启动之后，如果提示如下：

首先检测你的 Application 中，是否将 UseDeveloperSupport 设置为 true 了，如果设置为 true，意味着使用在线包，RN 使用的资源都从你电脑启动的 8081 服务器获取，那么你的 RN 服务器一定要启动，并且手机和电脑连接在同一网络下。

react-native run-android 命令行启动 或者 WebStorm 配置启动都会先启动服务器，如果启动后没有报错，就是网络问题或者代码中的 UseDeveloperSupport 的问题了。

如果在代码中将 UseDeveloperSupport 设置为 false，意味着使用离线包，一般正式环境打包才会设置为 false。

2.手机启动后，如果白屏或者摇一摇没反应或者 adb shell input keyevent 82 后没反应。正常情况下，手机上应该会出现 RN 的调试弹窗。

如果没有出现 RN 的调试弹窗，首先要排查代码中是否已经将 UseDeveloperSupport 设置为 true 。

旧版本的 RN 调试弹窗需要在手机中为应用开启悬浮窗权限，这个权限默认是关闭的，因此调试弹窗才没出现，或者说 RN 加载过程出错了，因为没有权限，错误信息无法在调试弹窗中显示，所以白屏了。

此时在手机中，找到应用，开启权限，重启应用即可。 有些人使用的是模拟器，找不到打开悬浮窗权限的入口，那么使用模拟器时加个简单的权限判断吧，6.0 以上使用 ：

      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M && !Settings.canDrawOverlays(context)) {
            Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION);
            intent.setData(Uri.parse("package:" + getPackageName()));
            context.startActivity(intent);
        }

上述悬浮窗权限不要直接在生产环境使用，悬浮窗权限判断比较复杂。在 Android 8.0 中 Settings.canDrawOverlays() 判断不准确。

---

正文

程序终于跑起来了，RN 界面终于显示了，笔者喜极而泣，那么如何 Debug 排查问题呢？

我的两板斧：日志、断点。

如果 Webstorm 的配置以 run 启动工程后：

1. 查看 RN 的日志：在需要调试的位置调用 console.log() 打印日志。那么在哪里查看日志呢？在 RN 工程下，命令行输入 react-native log-android，可以查看 RN 的打印日志。如果华为手机无法正常打印日志，参考 博客 ，我的华为手机有时候打印日志，有时候不打印，建议调试过程使用 piexl 手机。

2. 查看原生日志：WebStorm 启动 RN 工程后，使用 AndroidStudio 打开 Android 工程，可以直接使用 AndroidStudio 的相关工具，如 Attach Debugger to Process 或者 Android 的 Logcat，这里看不到 RN 的日志，所以排查问题时，往往需要两个 IDE 结合一起看。

---

如果 RN 的配置以 Debug 方式启动工程后：

可以像 AndroidStudio 一样断点调试，然而这样调试会比较卡顿。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-acW6sL8T-1605061685090)(http://img.hi-cat.cn/b27553e90ea9a8a4fab96149ed8745fa)]

3. 运行过程中，程序闪退了，注意查看 AndroidStudio 的 Logcat 崩溃日志。

---

小技巧

调试 RN 过程中，尽量不要使用华为手机调试：

1. 有的华为手机无法打印出 RN 日志。
2. 有的华为手机无法使用 AndroidStudio 断点，具体表现为，华为手机遇到断点后，过了几秒钟会直接闪退。

RN 官网上可以说调试还可以使用 react-devtools，这个工具我没用过，该工具对 RN 版本有要求：

Version 4 of react-devtools requires react-native version 0.62 or higher to work properly.

---

WebStorm 的 RN 代码提示

WebStorm 打开 ReactNative 工程，编辑代码的时候，如果没有相关的 API 提示，需要对 WebStorm 进行配置：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zlAzbw2F-1605061685091)(http://img.hi-cat.cn/b3c67b1c3a216ac6604451e208ab0416)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QlW7OVwI-1605061685092)(http://img.hi-cat.cn/6d78a12f4195a53decee514c87d83862)]

---

添加 BuildType

AndroidStudio 默认的 BuildType 只有 debug 和 release 。在开发过程当中，我们有时需要其他环境配置。例如添加 staging 环境：

staging{
            initWith release 
            matchingFallbacks = ['release']
            ......
}

在引入 RN 后，这样的配置并不起作用，会在启动时崩溃，原因是这样的配置没有打 RN 的离线包，默认情况下新添加的 buildType 需要以 release 开头（如果需要打 release 环境）。即：

releaseStaging{
            initWith release 
            matchingFallbacks = ['release']
            ......
}

参考文章： https://levelup.gitconnected.com/staging-environment-setup-for-react-native-in-0-60-x-android-8748d7f36e6b

---

最后

我不喜欢 RN ，RN 和原生代码混合开发，会造成代码库的使用不统一，并且 RN 和 原生的联合调试非常麻烦。