【问题标题】：What is the best way to Debug (User Interface) in React Native?在 React Native 中调试（用户界面）的最佳方法是什么？
【发布时间】：2019-09-07 20:29:43
【问题描述】：

在调试设计（用户界面）方面，我目前正在寻找一种替代方法来渲染组件，可能直接在浏览器中（可能吗）？

我发现标准方式的破坏性太大。每次出现不同的问题时，模拟器运行缓慢并死机，热重载失败。此外，如果您连接手机，您将完成连接、安装应用、启用选项等所有工作。有时也会给您带来麻烦。

如果您正在处理设计部分，处理这些微观问题可能会非常烦人。有没有直接的调试方法？就像我们调试 ReactJs 应用一样？

也许对于 Mac，它可以顺利运行，但在 Ubuntu 上，我已经苦苦挣扎了好几个星期才能让事情正常运行，但仍然没有成功。欢迎任何建议。谢谢。

【问题讨论】：

How do you debug React Native?的可能重复
我知道，但我正在考虑使用 UI 工具来加快工作速度。也许我应该更清楚一点。

标签： react-native

【解决方案1】：

我做什么

我用

react-native log-android

这将在终端中显示您console.log 的所有内容。

然后创建一个logger

function logger(anything){
    console.log(JSON.stringify(anything, null, 2))
}

这将在控制台中显示所有识别的内容，在控制台中查看效果会更好。

之后，我会在代码中的任何地方使用logger。

这是我找到的最简单、最快的方法。

【讨论】：

这个方法我还没试过，我试试谢谢。用户界面怎么样？有没有办法在 Chrome 中而不是在模拟器或手机中呈现 UI 元素？我目前在设计部分工作，现在我不能完全依赖标准方法。也许我需要在尝试之前解决所有问题...
因为 react-native 是原生的，所以无法在模拟器中模拟手机，但可以尝试使用snack。我没用过，但是你可以在 chrome 中模拟一下。

【解决方案2】：

试试this package最好的调试器工具

【讨论】：

推荐

我做什么