React Native如何进行调试？

Question

在应用模拟器中运行React Native应用时，如何对其进行调试?

- McG

---

除了这些答案之外，如果您正在使用VS Code并希望在其中进行调试而不是Chrome，则可以查看我的这个答案。 - gprathour

请关注这篇博客。 https://medium.com/javascript-in-plain-english/react-native-debug-with-vscode-in-simple-steps-bf39b6331e67 - Tunvir Rahman Tusher

Answer 1

Mac: Cmd+M

Windows 和 Linux: Ctrl+M

在模拟器中使用上面适当的快捷键，它会弹出 Chrome 浏览器，然后您可以使用开发者工具。

编辑:

此文档现已链接至帮助文档中。

- xanadont

---

使用v8.2模拟器时，按下Cmd+D似乎没有任何反应。Chrome是最新版本。是否需要在Chrome中安装某些特殊插件或代理？ - McG

收到“Websocket调试程序不可用。您是否忘记包括RCTWebSocketExecutor？”:/ - Tyler McGinnis

我遇到了以下错误：/Users/Serge/projects/serge/MyProject/node_modules/react-native/packager/launchChromeDevTools.applescript:668:671: script error: Expected class name but found property. (-2741)。我发现如果我在 Parallels 中禁用 Windows 应用程序与 Mac 的共享，它就可以正常工作。请参见 http://stackoverflow.com/questions/29310936/how-to-disable-start-of-parallels-when-script-interacts-with-google-chrome。 - Serge van den Oever

在OS X和Android上，这将是Cmd+M。 - flaky

请注意，如果您的构建配置设置为“Release”，则按下Cmd+D键将不起任何作用-请确保将其设置为“Debug”。 - jwinn

Answer 2

调试 React Native 应用

要调试 React 应用程序的 JavaScript 代码，请按照以下步骤进行：

1. 在 iOS 模拟器中运行应用程序。
2. 按 Command + D ，会打开一个网页，其地址为 http://localhost:8081/debugger-ui。（目前仅支持 Chrome）或使用 Shake Gesture（摇晃手势）。
3. 启用 Pause On Caught Exceptions 以获得更好的调试体验。
4. 按 Command + Option + I 打开 Chrome 开发者工具，或通过 View -> Developer -> Developer Tools 打开它。
5. 现在您应该能够像通常一样进行调试了。

可选项

安装 Google Chrome 的 React Developer Tools 扩展。这将允许您在开发者工具打开时选择 React 选项卡以导航视图层次结构。

实时重新加载

要激活实时重新加载，请按照以下步骤进行：

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

- Jiuhong Deng

---

这个答案基本上是复制了文档，这是一个开始，但并不特别有启发性。在这种情况下，“像通常一样调试”是什么意思？ - GreenAsJade

重要提示：React Developer Tools 已经几个月无法与 React Native 配合使用，并且仍在修复中。更多信息请查看此处链接：https://github.com/facebook/react-devtools/issues/229 - Lane Rettig

谁说这是在 Mac 上？ - shinzou

@shinzou，通过提到模拟器（对于iOS开发人员而言是模拟器，对于Android开发人员而言是仿真器），这已经是暗示了。是的，我知道这已经过去一段时间了，但仍然值得一提。 - Konrad Morawski

该扩展不适用于React Native。相反，您应该查看此链接：https://reactnative.dev/docs/debugging#react-developer-tools - M. Emre Yalçın

Answer 3

对于一款Android应用，如果你使用的是Genymotion模拟器，你可以通过按下 CMD + m 来切换菜单，但你可能需要在菜单中启用此功能。

• 取消选中小部件(widget)
• 通过 CMD + m 点击在Chrome中调试(debug in chrome)启用它

- John Lim

---

终于找到了一个 Android 的解决方案，谢谢！而且在最新版本中，“在 Chrome 中调试”已被替换为“远程开始调试”。 - MewX

@MewX，您能告诉我们如何做到这一点吗？ - Mo.

@Muhammed 你好，你可以按下 cmd + m 或者 ctrl + m，然后在模拟器弹出的窗口中选择 远程开始调试。 - MewX

Answer 4

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

adb shell input keyevent 82

它将提示一个屏幕，类似于此图片

然后选择

debug JS Remotely

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

- bpsourav21

---

这个命令在iOS上有等价物吗？我最近才开始使用RN，将来这会帮很大的忙。 - Juan Carlos Alpizar Chinchilla

Answer 5

cmd ⌘ + D 对我来说奇怪的是无法使用。在 iOS 模拟器中按下 ctrl + cmd ⌘ + Z 可以为我打开调试浏览器窗口。

这是弹出的屏幕：

更多详细信息请点击此处。

- bigtex777

---

我看不到这些选项... :( - Noah

是的，在最新的作品中，你的命令对我有效。 - Khurshid Ansari

Answer 6

除了其他答案之外，您可以使用调试器语句来调试React Native。

例如：

debugger; //breaks execution

这个操作需要您打开Chrome开发者工具

- jedt

---

太棒了！这正是我需要的！谢谢朋友！ - I_am_learning_now

Answer 7

尝试使用此程序：https://github.com/jhen0409/react-native-debugger

支持的操作系统有：windows、osx 和 linux。

它支持：react native 和 redux。

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

- Rob

---

我能通过这个调试器查看特定变量的值吗？我已经尝试了 console.log(url)，但是我找不到输出在哪里。 - QuarK

Answer 8

在 Debian 8 (Jessie) 上调试 React-Native 0.40.0 可以通过在 Android 模拟器上运行你的应用，并在 Chromium 或 Firebug 中导航到 http://localhost:8081/debugger-ui 来完成。要访问应用内开发者菜单，请在另一个终端窗口中运行以下命令，正如这里所指出的那样：

adb shell input keyevent 82

- BdN3504

---

您也可以在运行Metro的终端中按下D来执行此操作。 - Ian

Answer 9

我没有足够的声望来评论之前的回答，它们都很棒。 :) 以下是我在开发React Native应用程序时进行调试的一些方法。

1. 实时重新加载

   React Native使得使用⌘ + R键或启用实时重载变得非常容易，看到最新更改后，watchman会“刷新”模拟器。如果出现错误，您可以从红色屏幕中的行号得到线索。撤销一些操作并重新开始即可回到工作状态。

2. console.log('真的。')

   我发现自己更喜欢让程序运行并记录一些信息，而不是添加debugger断点。(虽然当尝试与外部包/库一起使用时，调试器很有用，并且具有自动完成功能，因此您知道可以利用哪些其他方法。)

3. 使用debugger;断点启用Chrome调试

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

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

有时它来自React Native平台本身，因此Google搜索React Native问题肯定会有所帮助。

希望这能对某些人有所帮助。

- chinloong

Answer 10

React Native 0.62发布 - 官方解决方案是Flipper Flipper是一款适用于React Native的Android和iOS移动调试工具，无需使用调试模式。

自从RN 0.62版本（参见此链接），Flipper已经成为默认项目的初始化工具。

Flipper具有一些用于调试的插件，包括布局、网络和共享首选项。

Flipper的最大优点不仅在于插件众多，还可以轻松查看Android/iOS设备的控制台调试信息。

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

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

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

- MJ Studio

---

我们必须手动安装Flipper吗？还是它与React Native一起打包了？如果是，我们该如何打开它？ - Charanor

@Charanor 我在升级到0.62版本时使用了React Native升级指南进行安装。 - MJ Studio