如何在 React Native 中正确调试?从我目前看到的情况来看,给出的调试消息对于缩小我的代码的查找范围并没有太大用处。我只是得到一个堆栈跟踪,它只提到了 node_modules 中的依赖关系,例如:
Android 模拟器图像(抱歉,没有足够的声誉在这篇文章中显示图像)
在上面的错误中,我明白在某个地方传入了一个非 Component 对象,但我不知道如何追踪它;整个堆栈跟踪仅提及来自 node_modules 的文件。
我也尝试过使用 Chrome 开发者工具:
我也尝试过 React Developer Tools,但也没有帮助。
如何从调试中获取实际有用并链接到我编写的代码的输出?
不幸的是,堆栈跟踪并不总是有帮助,因为在这种情况下您必须通过桥,并且没有任何单一的包罗万象的答案来说明如何获取您需要的信息。
在这种情况下,您很可能在一个组件中返回正确的 JSX 对象时犯了错误,这是对的。如果您记得最近添加到您的应用程序中的哪些组件,哪些组件构成了导致问题的导航器路径等,您可以对可能有问题的组件集进行有根据的猜测,并通过评论来缩小范围出去。一旦该集合的大小合理,请三重检查您的渲染方法并确保没有发生任何奇怪的事情。
您可以将自己的调试消息写入 chrome 开发人员控制台,以帮助自己了解您的应用程序正在做什么(例如,呈现此组件、从共享存储中获取该数据等)使用if(__DEV__) console.log("Your message here")
. 这将检查应用程序是否在调试版本与发布版本中运行,如果您正在运行调试版本,则仅记录消息。
您可以使用adb logcat
android 和 iOS 的 XCode 控制台来查看本机调试日志,尽管我认为在这种情况下它们不会有帮助。
您可以绘制组件树的图片,debugger
在每个渲染方法的开头放置一个语句,并逐个检查组件,直到您的应用程序停止尝试渲染事物并且您知道您遇到了有问题的组件(React将递归地渲染组件,从树中同一级别的组件从上到下)。
我知道当您无法通过查看堆栈跟踪立即判断问题出在哪里时会令人沮丧,但有时这就是生活。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句