你如何调试 React Native？

Posted 2023-02-16

技术标签:

【中文标题】你如何调试 React Native？【英文标题】：How do you debug React Native? 【发布时间】：2015-05-31 02:37:38 【问题描述】：

当应用在应用模拟器中运行时，如何使用 React Native 调试他们的 React 代码？

【问题讨论】：

除了这些答案之外，如果您正在使用 VS Code 并希望在其中而不是 Chrome 中进行调试，那么check my this answer 请关注此博客。 medium.com/javascript-in-plain-english/… 【参考方案1】：

在模拟器上按Cmd+D 并选择Debug 将打开浏览器调试器

【讨论】：

【参考方案2】：

使用Flipper 或reactotron。每个都有自己的好处，没有一个需要您启用调试模式，因此您的环境不会变慢！

【讨论】：

【参考方案3】：

如果您在 Atom 编辑器中使用 Nuclide 进行 React Native 应用程序开发，那么您还可以使用“元素检查器”，当应用程序在开发阶段在设备上运行时，它有助于观察道具和状态值的变化。

了解更多here

【讨论】：

【参考方案4】：

React Native 0.62 发布 - 官方解决方案是 Flipper ?

Flipper 是 android & ios Mobile 调试工具，在 react native 中不使用调试模式。

从 RN 0.62 开始（参见 link），Flipper 使用默认项目进行初始化。

Flipper 有一些用于调试的插件。插件包括Layout、Network、Shared preferences

Flipper最大的好处就是插件不多，但是你也可以轻松看到Android/iOS设备控制台调试。

Flipper 也会提醒您崩溃或网络拒绝。

布局插件包括无障碍模式和目标模式。

您还可以在您的应用程序中查看原始网络请求/响应。

【讨论】：

我们必须手动安装 Flipper 吗？还是它以某种方式随 React Native 一起提供？如果是，我们如何打开它？ @Charanor 我在升级到 0.62 时使用 react native 升级指南安装【参考方案5】：

首先在你的 ios 模拟器中，如果你按 [command + D] 键然后你可以看到这个屏幕。

然后点击远程调试JS按钮。

之后你可能会看到这样的 React Native Debugger 页面。

然后打开你的inspector[f12]，然后去控制台选项卡调试它！ :)

【讨论】：

【参考方案6】：

如果您想了解检查网络流量并了解本机 UI 视图层次结构。凭借其可扩展的插件 API，React Native Update 版本为调试移动应用程序提供了开发者工具。

Flipper 是一款出色的开发者工具，用于调试移动应用。该工具附带 react-native 62

【讨论】：

【参考方案7】：

如果要默认开启调试：

import  NativeModules  from 'react-native';

if (__DEV__) 
  NativeModules.DevSettings.setIsDebuggingRemotely(true)

要让它在 Android 上运行：

npm install --save react-native-devsettings-android
react-native link react-native-devsettings-android

参考：Launch a React Native app with “Debug JS Remotely” enabled by default

【讨论】：

在特定的地方我应该把这 4 行？在 App.js 或 index.js 中？ @JulienLamarche 放入 App.js 这应该被接受为答案......为什么也相信命令...... 这就是我要找的！谢谢。【参考方案8】：

使用 Visual Code Studio 调试 React Native android 和 ios 应用的最佳方式

第 1 步。

安装 React Native - Full Pack 扩展

第 2 步。

使用USB调试模式连接移动设备或从android studio打开模拟器。

第 3 步。

在 Visual Code Studio 的左侧菜单中单击调试选项点击 Add configuration 并选择 React Native 然后创建 launch.json

第 4 步。

在手机中长按打开开发选项或摇动手机并启用远程调试js

第 5 步。

最后一步点击播放按钮并选择Debug android或Debug ios

欲了解更多信息，请参阅此链接

https://medium.com/@tunvirrahmantusher/android-debug-with-vscode-for-react-native-96f54d73462a

【讨论】：

我不清楚第 4 步。我知道我们需要用我们的应用程序来做到这一点，对吗？我的应用程序有一些问题，当我在手机上运行它时会关闭它。我无法激活任何关于该问题的日志在index 上保留默认功能我可以看到：dl2.pushbulletusercontent.com/NUYTgl6Fgi6978eL8DehOSSQdO5SFqu1/… 你的 react redux 没有正确安装删除 node_module 并重新安装 npm 这与我必须手动安装的一些已弃用的库有关。谢谢指点【参考方案9】：

这是使用 react native 调试器应用程序的另一种方式。

您可以使用下面的链接下载应用程序，它是用于管理 redux 存储的非常好的应用程序以及源代码。

react-native-debugger

现在你可以直接使用下面的链接来帮助你。

chrome-developer-tools

【讨论】：

【参考方案10】：

反应本机调试器。它帮助我解决了 90% 的问题

【讨论】：

【参考方案11】：

您可以使用Safari来调试您的应用程序的iOS版本，而无需启用“远程调试JS”，只需按照以下步骤操作：

1. Enable Develop menu in Safari: Preferences → Advanced → Select "Show Develop menu in menu bar"
2. Select your app's JSContext: Develop → Your Simulator → Automatically Show Web Inspector for JS JSContext
3. Safari's Web Inspector should open which has a Console and a Debugger

【讨论】：

【参考方案12】：

如果你不想每 2 分钟晃动你的真手机，你也可以使用自定义库

我创建了一个库，允许您在开发模式下使用 3 根手指触摸而不是摇晃打开开发菜单

https://github.com/pie6k/react-native-dev-menu-on-touch

您只需将您的应用包装在里面：

从 'react-native-dev-menu-on-touch' 导入 DevMenuOnTouch； // or: import DevMenuOnTouch from 'react-native-dev-menu-on-touch'

class YourRootApp extends Component 
  render() 
    return (
      <DevMenuOnTouch>
        <YourApp />
      </DevMenuOnTouch>
    );

当您必须在真实设备上进行调试并且有同事坐在您旁边时，它非常有用。

【讨论】：

【参考方案13】：

而不是 Cmd+M，对于 Android 模拟器，在 Windows 中按 F10。模拟器开始显示所有 react-native 调试选项。

【讨论】：

F10 在物理设备的情况下不起作用【参考方案14】：

cmd ⌘ + D 奇怪地对我不起作用。在 iOS 模拟器中按 ctrl + cmd ⌘ + Z 确实为我启动了调试浏览器窗口。

这是弹出的画面：

More details here.

【讨论】：

我没有看到这些选项... :(【参考方案15】：

第 1 步： 将debugger 放置在您想要停止脚本的位置，例如：

  async saveItem(item, selectedValue) 
    debugger
    try 
        await AsyncStorage.setItem(item, selectedValue);
    
    catch (error) 
        console.error('AsyncStorage error: ' + error.message);

当控制到这个代码块时，这将暂停调试器。

第 2 步： 在 ios 模拟器 上按 Cmd+D，在 Android 模拟器 上按 Cmd+M。如果您使用的是真机，请摇动设备打开开发菜单，如果您不想摇动设备，请关注this blog

第 3 步： 选择Enable Remote JS Debugging，这将打开Chrome

第 4 步： 选择Developer Tools.

第 5 步： 无论您在代码中写入debugger 的位置，您的调试器都会在Sources 选项卡中暂停。转到控制台并键入要调试的任何参数（存在于代码块中），例如：要再次移动到下一个调试器点，请移动到 Sources -> 单击 Resume script execution 按钮（右上角的蓝色按钮）

将调试器放在要暂停脚本的任何位置。

享受调试！

【讨论】：

【参考方案16】：

我使用这个库来调试 react-native 项目

https://github.com/jhen0409/react-native-debugger 它包括

包括来自 react-devtools-core 的 React Inspector。包括 Redux DevTools，使用 redux-devtools-extension 制作了相同的 API。

或者你可以使用

For IOS $ react-native log-ios
For Android $ react-native log-android

【讨论】：

【参考方案17】：

adb logcat *:S ReactNative:V ReactNativeJS:V

logcat

react-native run-android

构建后，您应该会在logcat 中看到 Android Studio 中的详细日志。

【讨论】：

【参考方案18】：

对于 Android：Ctrl + M（模拟器）或摇动手机（在设备中）以显示菜单。

对于 iOS：Cmd + D 或摇动手机以显示菜单

确保您有 chrome。

在显示的菜单上选择远程调试 JS 选项。

Chrome 会在 localhost:8081/debugger-ui 自动打开。您也可以使用此链接手动转到调试器。

显示控制台，您可以看到记录的日志。

【讨论】：

【参考方案19】：

在 React-Native 中调试要容易得多。

要在 IOS 中调试，请使用

cmd + d

ctrl + cmd + z (模拟器用)

在安卓中调试

通过触摸摇动设备（确保您的开发者选项已启用）

【讨论】：

很好的解释。【参考方案20】：

如果你使用 Redux，我强烈推荐 React Native Debugger。它包括 Chrome devtools，但也有 Redux devtools 和 React devtools。

Redux Devtools：这允许您查看您的操作，并在它们之间来回切换。它还允许您查看您的 redux 存储，并具有自动区分先前状态与每个操作的更新状态的功能，因此您可以在来回执行一系列操作时看到这一点。

React Devtools：这允许您检查某个组件，即它的所有道具以及它的组件状态。如果你有一个布尔值的组件状态，它可以让你点击它来切换它，看看你的应用程序在它改变时如何反应。很棒的功能。

Chrome Devtools 允许您查看所有控制台输出、使用断点、在调试器上暂停；等标准调试功能。如果您右键单击 Redux Devtools 中列出您的操作的区域并选择“允许网络检查”，那么您可以在 Chrome Devtools 的网络选项卡中检查您的 API 调用，这很不错。

总之，将这些都集中在一个地方真是太棒了！如果您不需要其中之一，您可以打开/关闭它。获取 React Native Debugger 并享受生活。

【讨论】：

【参考方案21】：

对于 Android 应用，如果您使用 Genymotion，您可以通过按 CMD + m 来切换菜单，但您可能必须通过这样做在菜单中启用它。

取消勾选小部件 通过CMD + m启用它点击在chrome中调试

【讨论】：

终于找到了安卓解决方案，谢谢！在最新版本中，debug in chrome 被替换为start debug remotely。 @MewX 你能告诉我们怎么做吗？ ? @Muhammed 您好，您可以关注cmd + m 或ctrl + m，然后从模拟器的弹出窗口中选择start debug remotely【参考方案22】：

在新版本的 react-native 中，您可以使用 react-native log-android 或 react-native log-android 在开发模式下查看应用程序的日志。

【讨论】：

你的意思可能是react-native log-ios【参考方案23】：

还有一个很好的调试器名字 Reactotron。 https://github.com/infinitered/reactotron

您不必处于调试模式即可查看某些数据值，并且有很多选项。

去看看，真的很有用。 ;)

【讨论】：

谢谢！我们使用的 RN 0.59 似乎与 Flipper 不兼容。【参考方案24】：

要调试您的 React Native 应用程序，只需转到以下地址：

localhost:8081/debugger-ui 在你的默认浏览器（chrome）中打开开发者工具来调试你的 react native 应用程序

【讨论】：

谢谢。当您回答时，我可以看到一个页面显示一些消息和说明。如何调试代码在任何地方都没有提到，我可以在哪里看到我的代码。【参考方案25】：

如果您想在 Windows 上使用 android 设备进行调试，只需打开命令提示符然后输入（确保您的 adb 正常工作）

adb shell input keyevent 82

它会提示一个像图像一样的屏幕

然后选择

debug JS Remotely

它会自动打开一个新窗口。然后打开检查元素或按 F12 进入控制台。

【讨论】：

是否有与此命令等效的 iOS？我最近刚开始接触 RN，这对将来会有很大帮助【参考方案26】：

假设您想在 Android 模拟器上显示此菜单

然后，尝试⌘+m 在 Mac 上的 Android 模拟器上弹出此开发设置对话框。

如果没有显示，请转到AVD > (click the pen to edit your emulator configuration) > advanced settings > check the enable keyboard input box。

然后重试⌘+m。

如果仍然没有显示，请转到正在运行的模拟器设置，然后在 Send keyboard shortcuts to 组合框/下拉菜单中选择 Emulator controls (default) 选项。

然后重试⌘+m。

我希望这会有所帮助，它对我有用。

【讨论】：

【参考方案27】：

其实很简单。只需按 cmd D（如果在 mac 上），模拟器就会创建一个弹出菜单。从那里只需单击“远程调试 JS”或类似的东西。请注意，在执行与某些包相关的代码时运行调试器会给人们带来问题。我遇到了 react-native-maps 和调试器的问题。但这是固定的。不过，在大多数情况下，您应该没问题。

【讨论】：

【参考方案28】：

如果您使用的是模拟器，请使用 Ctrl+M 和模拟器 Cmd+D

点击-远程调试js

Google Chrome 转到控制台

【讨论】：

【参考方案29】：

我使用的一种与 Android 中的调试策略非常相似的技术是在我的所有 .js 文件中包含一个名为 TAG 的全局变量。