如何在 React Native 中正确调试?

gurs1kh

如何在 React Native 中正确调试?从我目前看到的情况来看,给出的调试消息对于缩小我的代码的查找范围并没有太大用处。我只是得到一个堆栈跟踪,它只提到了 node_modules 中的依赖关系,例如:

Android 模拟器图像(抱歉,没有足够的声誉在这篇文章中显示图像)

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

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

Chrome 开发者工具图片

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

如何从调试中获取实际有用并链接到我编写的代码的输出?

SoZettaSho

不幸的是,堆栈跟踪并不总是有帮助,因为在这种情况下您必须通过桥,并且没有任何单一的包罗万象的答案来说明如何获取您需要的信息。

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

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

您可以使用adb logcatandroid 和 iOS 的 XCode 控制台来查看本机调试日志,尽管我认为在这种情况下它们不会有帮助。

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类常见问题

如何在React Native中正确对齐文本输入?

来自分类Dev

如何在Ubuntu 14.10中调试react-native?

来自分类Dev

如何在React Router中正确使用IndexRoute?

来自分类Dev

如何在React Native中正确使用仅iOS组件而不会在Android中出现错误

来自分类Dev

如何在React中正确使用Onsen的Navigator?

来自分类Dev

如何在React-Native导航中正确使用Redux

来自分类Dev

如何在React-Native Android应用上连接/调试Firebase连接

来自分类Dev

如何在React Native iOS中调试链接错误?

来自分类Dev

如何在React Native中从异步存储中正确获取数据?

来自分类Dev

如何在react-router中正确键入组件属性?

来自分类Dev

如何在Typescript中正确键入React ErrorBoundary类组件?

来自分类Dev

如何在react中正确使用react-error-boundary?

来自分类Dev

如何在React Native中使用断点进行调试

来自分类Dev

如何仅使用VSCode调试React Native?

来自分类Dev

如何在React中正确更改2个状态?

来自分类Dev

如何在自己的文件中的React Native中正确实现自定义组件?

来自分类Dev

如何在React App中正确导入组件?

来自分类Dev

如何在React与TypeScript中正确使用useState钩子?

来自分类Dev

如何在React.JS中正确交换数组元素?

来自分类Dev

如何在Ubuntu 14.10中调试react-native?

来自分类Dev

在react-native中正确对齐ListView

来自分类Dev

如何在React Native中使用AnimatedCircularProgress正确放置视图

来自分类Dev

如何在React Native中正确使用仅iOS组件而不会在Android中出现错误

来自分类Dev

如何在React中正确使用Onsen的Navigator?

来自分类Dev

如何在 gulp 中正确包含 requirejs 和 react & JSX

来自分类Dev

如何在 reactjs 中正确使用 react-dates

来自分类Dev

如何在 React 中正确更新显示?

来自分类Dev

如何在react js中正确重置计时器

来自分类Dev

如何在 React Native 中正确使用 redux saga 和后台事件?

Related 相关文章

  1. 1

    如何在React Native中正确对齐文本输入?

  2. 2

    如何在Ubuntu 14.10中调试react-native?

  3. 3

    如何在React Router中正确使用IndexRoute?

  4. 4

    如何在React Native中正确使用仅iOS组件而不会在Android中出现错误

  5. 5

    如何在React中正确使用Onsen的Navigator?

  6. 6

    如何在React-Native导航中正确使用Redux

  7. 7

    如何在React-Native Android应用上连接/调试Firebase连接

  8. 8

    如何在React Native iOS中调试链接错误?

  9. 9

    如何在React Native中从异步存储中正确获取数据?

  10. 10

    如何在react-router中正确键入组件属性?

  11. 11

    如何在Typescript中正确键入React ErrorBoundary类组件?

  12. 12

    如何在react中正确使用react-error-boundary?

  13. 13

    如何在React Native中使用断点进行调试

  14. 14

    如何仅使用VSCode调试React Native?

  15. 15

    如何在React中正确更改2个状态?

  16. 16

    如何在自己的文件中的React Native中正确实现自定义组件?

  17. 17

    如何在React App中正确导入组件?

  18. 18

    如何在React与TypeScript中正确使用useState钩子?

  19. 19

    如何在React.JS中正确交换数组元素?

  20. 20

    如何在Ubuntu 14.10中调试react-native?

  21. 21

    在react-native中正确对齐ListView

  22. 22

    如何在React Native中使用AnimatedCircularProgress正确放置视图

  23. 23

    如何在React Native中正确使用仅iOS组件而不会在Android中出现错误

  24. 24

    如何在React中正确使用Onsen的Navigator?

  25. 25

    如何在 gulp 中正确包含 requirejs 和 react & JSX

  26. 26

    如何在 reactjs 中正确使用 react-dates

  27. 27

    如何在 React 中正确更新显示?

  28. 28

    如何在react js中正确重置计时器

  29. 29

    如何在 React Native 中正确使用 redux saga 和后台事件?

热门标签

归档