你如何调试 React Native？

模拟器中的 Cmd+D。它会弹出 Chrome 并从那里你可以使用开发者工具。

编辑：

现在链接在 help docs 中。

---

调试 React Native 应用程序

要调试您的 react 应用程序的 javascript 代码，请执行以下操作：

在 iOS 模拟器中运行您的应用程序。按 Command + D 并在 http://localhost:8081/debugger-ui 处打开一个网页。 （目前仅限 Chrome）或使用 Shake Gesture Enable Pause On Caught Exceptions 以获得更好的调试体验。按 Command + Option + I 打开 Chrome 开发者工具，或者通过 View -> Developer -> Developer Tools 打开它。您现在应该能够像往常一样进行调试了。

可选的

为 Google Chrome 安装 React Developer Tools 扩展程序。如果您在开发人员工具打开时选择 React 选项卡，这将允许您导航视图层次结构。

实时重新加载

要激活 Live Reload，请执行以下操作：

在 iOS 模拟器中运行您的应用程序。按 Control + Command + Z。您现在将看到 Enable/Disable Live Reload、Reload 和 Enable/Disable Debugging 选项。

---

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

https://i.stack.imgur.com/z3knE.png

取消勾选小部件

通过 CMD + m 启用它单击 chrome 中的调试

---

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

adb shell input keyevent 82

https://i.stack.imgur.com/ew83J.png

然后选择

debug JS Remotely

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

---

除了其他答案。您可以使用 debugger 语句调试 react-native

例子：

debugger; //breaks execution

您的 chrome 开发工具必须打开才能正常工作

---

https://i.stack.imgur.com/cI0Ji.png

试试这个程序：https://github.com/jhen0409/react-native-debugger

适用于：windows、osx 和 linux。

它支持：react native 和 redux

您还可以检查虚拟组件树并修改反映在应用程序中的样式。

---

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

这是弹出的画面：

https://i.stack.imgur.com/QaJ8S.png

More details here.

---

在 Debian 8 (Jessie) 上调试 react-native 0.40.0 可以通过在您的应用程序在 android 模拟器中运行时导航到 Chromium 或 Firebug 中的 http://localhost:8081/debugger-ui 来完成。要访问应用内开发者菜单，请在另一个终端窗口中运行以下命令，如 here 所指出的：

adb shell input keyevent 82

---

我没有足够的声誉来评论以前很棒的答案。 :) 以下是我在开发 react-native 应用程序时调试的一些方法。

实时重新加载 react-native 使得使用 ⌘ + R 键可以非常容易地查看您的更改，甚至只需启用实时重新加载，watchman 将使用最新更改“刷新”模拟器。如果出现错误，您可以从该红色屏幕的行号中获得线索。几次撤消将使您回到工作状态并重新开始。 console.log('是的，认真的') 我发现自己更喜欢让程序运行并记录一些信息，而不是添加调试器断点。 （调试器在尝试使用外部包/库时很有用，它带有自动完成功能，因此您知道可以使用哪些其他方法。）使用调试器启用 Chrome 调试；程序中的断点。

好吧，这取决于您遇到的错误类型以及您对如何调试的偏好。对于大多数 undefined is not an object (evaluating 'something.something')，方法 1 和 2 对我来说已经足够了。

而处理由其他开发人员编写的外部库或包将需要更多的调试工作，因此像 Chrome Debugging 这样的好工具

有时它来自 react-native 平台本身，因此在谷歌上搜索 react-native 问题肯定会有所帮助。

希望这可以帮助那里的人。

---

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

https://i.stack.imgur.com/4mMfd.png

---

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

Flipper 是 Android 和iOS 移动调试工具，无需在 react native 中使用调试模式。

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

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

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

Flipper 也会提醒您有关崩溃或网络拒绝的情况。

https://i.stack.imgur.com/YTUlu.png

布局插件包括可访问性模式和目标模式。

https://i.stack.imgur.com/rXgJd.png

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

---

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

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

确保你有铬。

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

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

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

---

adb logcat *:S ReactNative:V ReactNativeJS:V

在终端中运行它以获取 android 日志。

---

https://i.stack.imgur.com/ggaHE.png

如果您使用它，请不要忘记在模拟器中启用远程调试 JS。

---

对我来说，在 React-Native 上进行调试的最佳方式是使用 "Reactotron"。

安装 Reactotron，然后将这些添加到您的 package.json 中：

"reactotron-apisauce": "^1.1.2",
"reactotron-react-native-under-37": "^1.1.2",
"reactotron-redux": "^1.1.2", 

现在，只需登录您的代码即可。例如：console.tron.log('debug')

---

在模拟器中运行您的应用程序 - react-native run-ios 按 ctrl + d 并单击远程调试 JS

https://i.stack.imgur.com/GIKsF.png

网页应在 http://localhost:8081/debugger-ui 打开，如果没有输入 URL 并转到 Chrome 中的此链接 右键单击页面并单击检查，它应该打开 chrome 的开发人员工具

https://i.stack.imgur.com/4gK17.png

转到顶部菜单中的源代码并在右侧文件资源管理器中找到您的 js 类文件。您可以在视图中放置断点并在其中调试代码，如图所示。

---

如果要默认启用调试：

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

---

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

https://i.stack.imgur.com/XcXNj.png?s=256

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

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

https://i.stack.imgur.com/i9tF1.png

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

---

默认情况下，我的 ios 模拟器没有拾取击键，这就是 cmd-D 不起作用的原因。我不得不使用模拟器的菜单打开键盘的设置：

硬件 > 键盘 > 连接键盘

现在 cmd-D 启动 chrome 调试。

---

对于 android 应用程序。按 Ctrl+M 远程选择调试 js，它将在 chrome 中打开一个带有 url http://localhost:8081/debugger-ui 的新窗口。您现在可以在 chrome 浏览器中调试应用程序

---

在文件路径中有空格防止 Cmd+D 工作。我将我的项目移动到一个没有空间的位置，我终于让 Chrome 调试器工作了。看起来像一个bug。

---

很简单只有两个命令

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

---

如果您使用的是模拟器，请使用 Ctrl+M 和模拟器 Cmd+D 单击 - 远程调试 js Google Chrome 转到控制台

---

https://i.stack.imgur.com/hVrUG.png

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

如果没有显示，请转到 AVD >（单击笔以编辑您的模拟器配置）> 高级设置 > 选中启用键盘输入框。

然后重试⌘+m。

如果它仍然没有显示，请转到正在运行的模拟器设置，然后在将键盘快捷键发送到组合框/下拉列表中，然后选择模拟器控件（默认）选项。

https://i.stack.imgur.com/hJc70.png

然后重试⌘+m。

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

---

如果你使用 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 并享受生活。

---

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

在 IOS 中调试使用

cmd + d ctrl + cmd + z （用于模拟器）

在android中调试

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

---

您可以使用 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

---

这是使用反应原生调试器应用程序的替代方法。

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

react-native-debugger

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

chrome-developer-tools

---

第 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

https://i.stack.imgur.com/VAd25.png

第 4 步：选择 Developer Tools.

https://i.stack.imgur.com/wZkqU.png

https://i.stack.imgur.com/A9RdV.png

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

享受调试！

---

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

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

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

---