我不得不承认，我通常不会设置调试器，除非它很容易使用。我做了近二十年的开发者，早在我开始的时候，这绝不是一件容易的事。
我曾经能够让不同语言的调试器工作过一两次，但只要出了问题就放弃了，而且，在大多数情况下，直到最近才使用任何调试器。我主要用JavaScript工作，可以用console.log 。它工作得很好，而且我不需要进入一个配置东西的兔子洞。
但后来我了解到Flipper，这是我使用过的最好的调试器之一，适用于任何技术。
什么是Flipper？
你可以在React Native中只使用console.log ，但有时这是不足够的，你可以做一些调试。
你可以在Redux状态更新时不断地将其记录到控制台，但这些结果比一个漂亮的表格要难看得多，这个表格列出了所有的更新和你可以点击查看的变化明细。
你也可以想办法记录你的网络调用的每一部分，或者你可以直接使用Flipper，马上看到为什么你会得到一个403错误。
但Flipper能做的远不止这些。它有一个插件系统用于添加专门的调试。本文将指导你如何使用Flipper对React Native进行调试。
安装Flipper
安装桌面应用程序很容易。你可以在这里找到Windows、Mac或Linux的安装文件。
根据你的操作系统，你还需要安装Android和iOS的开发工具，这才有意义，否则，你为什么要安装Flipper？你还需要安装OpenSSL。
我早先发现Flipper的时候，我正在做的一个项目使用了旧版本的React Native，但我不想调查在iOS和Android上手动设置它。
幸运的是，现在只要你使用0.62或更高的版本，它就能在React Native中工作。要在一个新的React Native应用中开始使用Flipper，请安装Flipper桌面应用，启动Flipper，并运行你的项目。
一旦你安装了Flipper，点击左边菜单上的Setup Doctor按钮，确保你已经安装了所有的依赖项。如果你缺少什么，Flipper会告诉你如何解决这个问题。
你也可以手动添加Flipper到React Native Android应用、React Native iOS应用、本地Android应用或本地iOS应用。
内置的Flipper功能
开箱即用，Flipper的功能超过了你对一个标准调试器的期望。它把你想知道的关于项目状态的一切都放在一个地方。
用Flipper轻松调试
通过点击Hermes调试器菜单，你可以在Flipper中像在Chrome中一样轻松地进行调试。你可以使用console.log --就像我在下面做的那样--如果你想的话。在紧要关头，它的效果很好。
本地日志
如果你用React Native开发，你可能知道你必须在多个地方调试问题，包括本地。有时应用程序崩溃了，React Native日志并没有什么帮助。
Flipper在左侧菜单的设备部分提供了对本地日志的访问。当你查看日志时，知道你在寻找什么是有帮助的，所以你可以使用顶部的过滤器字段来缩小结果。
用Flipper启用React DevTools
当我开始用React Native开发时，我很怀念能够使用React DevTools。在你的代码中很容易忽视你的组件道具中的错误，而这个工具会准确地告诉你发生了什么。它对寻找第三方组件中的未记录的道具也很有帮助。
网络调试
这个工具帮助我追踪了一个闪屏被卡住的原因。一个网络调用失败，使应用程序无法进入仪表盘屏幕。
如果你通过Chrome进行调试，如果不在项目中添加一些代码，你就无法看到应用程序的网络调用。你能看到的只是字体和图片的网络调用。而且，为了能够通过Chrome调试应用程序的网络调用，我不得不在App.tsx 文件中添加这些代码。
global.XMLHttpRequest = global.originalXMLHttpRequest || global.XMLHttpRequest;
有了Flipper，我再也不用担心这个问题了。
Redux调试器
Redux很好，直到你在某处有一个错别字，并且无法在你的代码中发现它。有时console.log ，用于调试Redux，但这并不容易。你通常要在多个地方登录才能弄清楚发生了什么事。
这时你会开始怀疑你为什么需要Redux。但如果有一个Redux调试器，可以记录所有的操作，并显示更新前后的状态，可以让你不至于用console.logs ，在应用中追寻你的数据。
共享的偏好查看器
这个屏幕将帮助你确定共享偏好中的情况，也就是说，如果你的应用程序每次关闭时都将用户注销。
本地布局检查器
这个检查器可以让你看到你的本地布局中发生了什么。它还支持一些第三方的React Native组件，如Litho和ComponentKit。
使用Flipper的其他好处
Flipper允许你用左侧边栏和设备选择器下面的按钮来控制其他东西。有了它，你可以
- 启动一个模拟器/仿真器
- 运行 "设置医生"，检查是否有遗漏的依赖项
- 重新加载应用程序
- 打开应用程序的开发菜单
- 拍摄应用程序的屏幕截图
- 拍摄应用程序的视频
使用Flipper插件
这是Flipper区别于其他调试工具的特点。Flipper是可扩展的。你可以通过点击左边的第二个标签，也就是有方块的那个，来进入插件菜单。
如果你点击安装 菜单，需要一段时间才能显示出可用的插件。它没有一个加载指示器，所以只要有耐心，它们最终会显示出来。在那里，你可以通过点击一个按钮来安装插件，或者从底部的表格中选择本地插件路径。
以下是目前可用的一些插件。
- LeakCanary：这已经是标准插件的一部分，但你必须在你的应用程序中添加对它的支持
- 数据库：这个插件也预装在桌面应用程序中，但需要更多配置。它为你提供了一个基本的GUI，对你的应用所使用的数据库进行读写访问。
- React导航：有时我认为React导航是一个伟大的软件包，但有时我希望它能不那么复杂。这个插件将帮助你弄清楚为什么你的导航没有像你期望的那样行动。
- 重新选择：这个插件将告诉你你的选择器在做什么
- 性能：测量和监控你的应用程序的性能
- React Query：在React Native中为你提供React Query DevTools。
- Bridge Spy：如果你正在构建本地React Native组件，这个特别有用。
你也可以创建你自己的插件并将其贡献给社区。
用断点进行调试
我已经有一段时间没有用断点来调试JavaScript了，因为console.log ，工作做得很好。React Native是一种不同的动物，断点在那里很好，所以让我们看看如何使用它们。
你需要知道的第一件事是，你必须在你的React Native项目中使用Hermes才能使用断点，除非你涉足半打问题线程，否则你不会自己弄清楚。
但是，在大多数情况下，在你的项目中启用Hermes很容易。它将使你的React Native应用运行得更快，特别是在Android上。我确实遇到了一个我正在使用的软件包的问题，但更新到最新版本后，问题就解决了。我遇到的涉及Hermes的其他问题大多是由第三方软件包的问题引起的。
启用Hermes后，选择**Hermes调试器（RN）**部分，这将加载Chrome开发工具的一个实例。选择 "源"选项卡，你将在左边侧栏的 "页"下找到你的项目中的文件。它们应该在localhost:8081 文件夹下。
然后，选择你正在处理的文件，点击你想要断点的行号的左边，并运行你的应用程序到那个点。
在这个例子中，我试图弄清楚为什么我从一个端点得到一个401 。我马上发现，当我从共享偏好中获得令牌时，我没有使用await 。我知道令牌是正确的，因为我可以到Flipper中的共享首选项查看器中去检查。
结论
如果你在React Native中开发应用程序，没有理由不使用Flipper。你所需要做的就是下载Flipper，安装它，然后运行它。我也认为console.log ，但现在我希望我所有不使用React Native的项目都有Flipper。
The post Debugging React Native apps with Flipperappeared first onLogRocket Blog.
