如何在React Native中正确调试?

时间:2017-07-29 01:44:13

标签: reactjs debugging react-native

如何在React Native中正确调试?从我到目前为止所看到的情况来看,给出的调试信息对于缩小查看代码的位置并不太有用。我只是得到一个堆栈跟踪,只提到node_modules中的依赖项 例如:

Android emulator image(抱歉,没有足够的声誉在这篇文章中显示图片)

在上面的错误中,我提到并且在某个地方传递了非Component对象,但我不知道如何跟踪它;整个堆栈跟踪仅提示node_modules中的文件。

我也尝试过使用Chrome开发者工具:

Chrome Developer Tools image

我也尝试过React Developer Tools,它也没有帮助。

如何从调试中获取实际有用且与我编写的代码相关联的输出?

1 个答案:

答案 0 :(得分:0)

不幸的是,堆栈跟踪并不总是有用,因为在这种情况下,您必须通过桥接器,并且没有任何单一的全能解答如何获取所需的信息。

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

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

您可以使用adb logcat用于Android和XCode控制台用于iOS查看本机调试日志,但我不认为他们在这种情况下会有所帮助。

您可以绘制组件树的图片,在每个渲染方法的开头放置一个debugger语句,然后逐个检查组件,直到您的应用停止尝试渲染事物并且您知道已经遇到了一个有问题的组件(React将递归地呈现组件,从上到下为树中同一级别的组件提供。)

我知道,如果你不能通过瞥一眼堆栈痕迹立即告诉问题在哪里,但有时那就是生命,这是令人沮丧的。