如何在React Native中正确调试？

Question

如何在React Native中正确调试？从我目前看到的情况来看，给出的调试信息对于缩小代码中查找范围的范围并不太有用。我刚刚得到一个堆栈跟踪，仅提到了node_modules 例如依赖关系：

Android emulator image（对不起，没有足够的信誉来证明这个帖子上图片）

在上面的错误，我understsand在某个地方一个非Component对象被传入，但我不知道如何追踪它;整个堆栈跟踪仅提及来自node_modules的文件。

我一直在使用Chrome开发者工具，以及尝试：

Chrome Developer Tools image

我也试图作出反应的开发工具和它要么是没有帮助的。

如何从调试中获得输出，这实际上是有用的，并且与我写的代码相关联？

Answer 1

不幸的是，堆栈跟踪并不总是有帮助，因为在这种情况下，您必须通过桥接，并且没有任何单一的全部答案来获取您需要的信息。

在这种情况下，您是对的，您很可能在您的某个组件中返回适当的JSX对象时发生错误。如果你记得你最近添加到你的应用中的哪些组件，哪些组件构成导航问题的导航器路线等，你可以对一组可能有问题的组件进行有根据的猜测，并通过评论事物来缩小设置的范围出。一旦这个集合是一个合理的大小，三重检查你的渲染方法，并确保没有任何奇怪的事情发生。

您可以使用if(__DEV__) console.log("Your message here")将自己的调试消息写入chrome开发人员控制台，以帮助自己了解您的应用正在做什么（例如，呈现此组件，从共享存储中获取该数据等）。这将检查应用程序是否在调试版本和发行版本中运行，并且只在运行调试版本时记录消息。

对于android和iOS的XCode控制台，您可以使用adb logcat来查看本地调试日志，但我认为他们不会在这种情况下提供帮助。

您可以绘制组件树的图片，在每个渲染方法的开始放置一个debugger语句，并逐个检查组件，直到您的应用停止尝试渲染事物并且您知道已经点击一个有问题的组件（React将递归地呈现组件，从树的同一层上的组件向上自上而下）。

我知道这很令人沮丧，当你无法立即通过查看堆栈跟踪来判断问题出在哪里，但有时候这就是生活。