本文由 简悦 SimpRead转码，原文地址 www.callstack.com
通过实施 Flipper 建立更好的反馈回路，在开发应用程序时享受更多乐趣......
以下文章是React Native 优化终极指南的一部分，介绍了如何使用 Flipper 更快更好地进行调试。
为什么这很重要？
调试为何重要？调试过程是移动应用程序开发中最重要的元素之一。但是，正如您可能知道的那样，如果管理不善，调试过程可能会非常耗时，而且可能不是工作中最令人愉快的部分。在本文中，我们将告诉您如何让调试过程更快、更好、更愉快。在基于《React Native 优化终极指南》的其他博文中，我们将讨论以下与性能相关的主题：
- 使用 Gradle 设置优化 Android 应用程序的大小
- 使用 Hermes 优化 Android 应用程序的启动时间
- 使用 "Autolinking "自动管理依赖关系
- 为什么必须始终运行最新版本的 React Native？
- 实验 React Native 的新架构
请务必查看这些内容。现在，让我们进入正题。
调试 React Native 应用程序的挑战
调试是每个开发人员日常工作中更具挑战性的部分之一。当一切看起来都正常时，引入一个新功能相对容易，但找到问题所在可能会让人非常沮丧。我们通常会尝试尽快修复错误，尤其是当错误非常严重并导致应用程序无法运行时。在这个过程中，时间是一个重要因素，我们必须敏捷地快速解决问题。
然而，调试 React Native 并不是非常简单，因为您要解决的问题可能发生在不同的层面。也就是说，它可能是由以下原因造成的：
- JavaScript：您的应用程序代码或 React Native，或
- 原生代码：第三方库或 React Native 本身。
在调试原生代码时，你必须使用 Android Studio 和 Xcode 内置的工具。而在调试 JavaScript 代码时，你可能会遇到一些困难。第一种也是最 "幼稚 "的调试方法是在代码中写入 console.logs，然后在终端中检查日志。这种方法只适用于解决琐碎的错误或采用分而治之的技术。在其他情况下，您可能需要使用外部调试器。
默认情况下，React Native 会提供内置调试工具。
最常见的是 Google Chrome 调试器。通过它，你可以在代码中设置断点，或以比终端更便捷的方式预览日志。不幸的是，使用 Chrome 浏览器调试器可能会导致难以发现的问题。这是因为你的代码是在 Chrome 浏览器的 V8 引擎中执行的，而不是在 JSC 或 Hermes 等特定平台引擎中执行。
在 Chrome 浏览器中生成的指令会通过 Websocket 发送到模拟器或设备。这意味着你无法真正使用调试器来剖析你的应用程序，因此它检测不到性能问题。它可以让你大致了解可能导致问题的原因，但由于 WebSocket 消息传递的开销，你将无法调试真实情况。
另一个不便之处是，使用 Chrome 调试器无法轻松调试网络请求（需要额外设置，且仍有其局限性）。要调试所有可能的请求，必须使用模拟器的开发者菜单打开专用的网络调试器。不过，由于模拟器屏幕的大小，它的界面非常小，不方便使用。
从开发者菜单，你还可以访问其他调试实用程序，如布局检查器或性能监控器。后者使用起来相对方便，因为它只显示一小部分信息。不过，由于前者提供的工作空间有限，使用起来比较费劲。
在调试和查找性能问题上花费更多时间意味着更糟糕的开发体验和更低的满意度
与原生开发人员不同，使用 React Native 的开发人员可以使用各种调试工具和技术。每种工具和技术都源自不同的生态系统，如 iOS、Android 或 JS。虽然一开始听起来很不错，但您需要记住，每种工具都需要不同水平的原生开发专业知识。这使得绝大多数 JavaScript 开发人员在选择时面临挑战。不方便的工具通常会降低团队的开发速度，让团队成员感到沮丧。因此，他们的工作效率会大打折扣，影响应用程序的质量并降低发布频率。
打开 Flipper，调试比以往更快更好
如果能有一个综合工具来处理所有这些用例，岂不更好？当然可以！这就是 Flipper 发挥作用的地方！
Flipper 是移动应用程序的调试平台。它还支持 React Native，将其视为一等公民。Flipper 于 2019 年 9 月发布，自 0.62 版起默认随 React Native 一起发布。
它是一款具有便捷界面的桌面应用程序，可直接与应用程序的JS 和原生代码集成。这意味着您不必再担心 JS 运行时差异和使用 Chrome 调试器时的性能问题。它自带网络检查器、React DevTools 甚至原生视图层次工具。
此外，Flipper 还可以预览原生代码的日志并跟踪原生崩溃情况，因此你不必运行 Android Studio 或 Xcode 就能检查原生方面的情况！
Flipper 易于扩展，因此很有可能被社区开发的各种实用插件所丰富。在这一点上，你可以使用 Flipper 来检测内存泄漏、预览共享首选项的内容或检查加载的图像。此外，Flipper for React Native 还集成了 React DevTools、Hermes 调试器和 Metro 捆绑程序。
最令人兴奋的是，所有需要的实用工具都放在一个桌面应用程序中。这最大限度地减少了上下文切换。如果没有 Flipper，开发人员在调试与显示从后台获取的数据相关的问题时，就必须使用 Chrome 调试器（预览日志）、模拟器内网络请求调试器以及模拟器内布局检查器或独立的 React Devtools 应用程序。有了 Flipper，所有这些工具都可以作为内置插件使用。它们可以通过侧边面板轻松访问，并具有相似的用户界面和用户体验。
Flipper 建立了更好的反馈回路，让使用 React Native 变得更有趣
更好的调试过程能让应用程序的开发周期更快、更可预测。因此，您的团队能够生成更可靠的代码，并更容易发现任何问题。
在一个界面中使用所有调试实用程序绝对符合人体工程学，而且不会中断与模拟器或设备的任何交互。这一过程将减轻团队的负担，从而对产品开发和错误修复的速度产生积极影响。
需要性能方面的帮助？请联系我们！如果您正在为提高应用程序性能而苦恼，请与我们联系。
我们是 Meta 和 Vercel 的官方合作伙伴，也是社区的积极贡献者。我们已经为从初创公司到大型企业的数十家国际客户提供了高质量的解决方案。无论您的组织有任何 React Native 开发需求，我们都能满足您。
