在 Android 设备上调试 React Native App。没有“远程调试 JS”选项

Posted 2023-02-19

【中文标题】在 Android 设备上调试 React Native App。没有“远程调试 JS”选项

【英文标题】：Debugging React Native App on Android Device. No 'Debug JS Remotely' option

【发布时间】：2018-06-20 17:31:35

【问题描述】：

在我的项目中运行adb -d reverse tcp:8081 tcp:8081 和react-native run-android 之后，我的React Native 应用程序在我的Android 设备上运行并进行了USB 调试。

在 Chrome 开发者工具中，我的设备在 remote devices 中列出。

根据许多博客和文档本身 (https://facebook.github.io/react-native/docs/debugging.html)，我应该可以在设备的开发人员选项中选择“远程调试 JS”，但我没有这样的选项。

导航到http://localhost:8081/debugger-ui 会呈现以下消息：

React Native JS code runs inside this Chrome tab.

Press ⌘⌥J to open Developer Tools. Enable Pause On Caught Exceptions 
for a better debugging experience.

Status: Waiting, press ⌘R in simulator to reload and connect.

在我的设备上重新加载没有任何作用。

我在 Android 7.1.1 上使用 OnePlus 3 设备（虽然在运行 Android Lollipop 模拟器时也会出现此问题）

请告知如何在 chrome 工具中调试我的 react native 项目。

谢谢

【问题讨论】：

你用的是什么设备？

你到达开发者选项了吗（摇一摇设备）？

我已进入开发者选项菜单，我使用的是 OnePlus 3

只需在您的 chrome 浏览器上单击右键并选择检查。调试器的用法与您在 chrome 上使用 inspect web developer console 一样。要在您的 RN 应用程序中进行快速测试，只需键入 console.log('Hello World') 并在浏览器控制台中看到它打印出来

谢谢，但除了“状态：等待，在模拟器中按 ⌘R 重新加载并连接”外，我没有什么可以右键单击的。留言

【参考方案1】：

试试这个方法。

在您的项目中转到android/app/src/main/res/values/strings.xml，并保留以下代码。

<resources>
  <string name="app_name">Your projec name</string>
</resources>

【参考方案2】：

在android/app/src/main/res/values/styles.xml 中，注释掉以下行。

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
     ...
     <!-- <item name="android:windowIsTranslucent">true</item> -->
     ...
</style>

在android/app/src/main/res/values/strings.xml 中，注释掉以下行。

<resources>
     <string name="app_name">xxxxx</string>
     ...
     <!-- <string name="catalyst_debugjs"></string>
     <string name="catalyst_element_inspector"></string>
     <string name="catalyst_jsload_error"></string>
     <string name="catalyst_jsload_message"></string>
     <string name="catalyst_jsload_title"></string>
     <string name="catalyst_reloadjs"></string>
     <string name="catalyst_settings"></string>
     <string name="catalyst_settings_title"></string> -->
     ...
</resources>

【参考方案3】：

您可以使用Genymotion 来调试 react-native 应用程序

【讨论】：

Genymotion android 模拟器也没有“远程调试 JS”选项