Flipper 和 JS：为什么移动调试平台增加了对 JavaScript 的支持
本文由作者与 Meta 的软件工程师 Andrey Goncharov 共同撰写。
Flipper 是用于调试 Android、iOS 和 React Native 应用的开源平台，工程师可借助这一平台，通过简单的桌面界面来可视化、检查和控制其应用。自 2018 年以来，它一直是 Meta 和众多社群所用的一个关键工具。
在 Flipper 内部，过去一直有一个未记录在案的试验性 JavaScript SDK，该 SDK 可为浏览器和 Node.js 应用提供支持。在 Meta 内部，该 SDK 已经过验证并稳定下来，我们现在已经把它升级成了 JavaScript 客户端的官方 SDK：js-flipper。
我们将在本帖子中探讨以下几个方面：
- js-flipper 是什么？如何试用？
- Meta 内部如何使用它？
- 它能为您带来哪些益处？
js-flipper 是什么？
js-flipper 是一个新的 NPM 包，可用于支持在 Flipper 客户端中运行 JavaScript 应用，允许您轻松开发新的或重用现有的 Flipper 插件。在浏览器中或 Node.js 服务器上运行的任何 JS 客户端现在都可以连接到 Flipper 进行调试会话。
我们编写了一份快速入门指南，帮助您创建首个 Flipper 插件并将其集成到应用中。或者您也可以运行我们提供的演示应用来进行试用！
为什么 js-flipper 对 Flipper 社群意义非凡？
Flipper 的超强功能源于插件生态系统和这些插件的开发者。
最初，构建 Flipper 平台是为了调试移动应用。这一平台可为 Android 和 iOS 应用（包括 React Native）提供开箱即用支持。新的 js-flipper SDK 扩展了 Flipper 的应用范畴，增加了对非移动 JavaScript 应用的支持。
我们相信，重用现有插件对许多 JS 应用都有好处。根据 Meta 内部的经验，我们发现一些网页应用和移动应用共享了许多可采用相同插件调试的基础设施。
新的 JS 开发者将带来专业知识，帮助社群成长。Flipper 及其插件的用户界面采用 TypeScript 和 React 编写而成，因而新开发者的经验会很有借鉴意义。
js-flipper 是将 Flipper 用于非移动应用的首次尝试，可以证明将 Flipper 扩展到更多平台和用例这一理念的可行性。我们希望它能促进社群发展，不断增加插件数量，日益提升插件质量。
Flipper 的工作原理？
下面我们快速浏览一下 Flipper 的主要架构：
具体过程如下：
- Flipper 不断轮询 ADB（Android Debug Bridge：允许开发者与安卓设备通信）和 IDB（iOS Debug Bridge：创建目的与 ADB 相似），分别查找可用的 Android 和 iOS 设备。
- 如果该设备正在运行启用了 Flipper 客户端的程序，则客户端会尝试连接到笔记本电脑上的 Flipper。也就是说，客户端让 Flipper 知晓这里有可以与之通信的应用。然后，Flipper 和该应用建立安全连接。不久之后，他们会就受支持插件列表进行协商。然后，Flipper 向该设备发送一条请求，列出受支持的插件。最后，设备通过 WebSocket 连接回复该列表。
- 开发者选择其中一个已连接的应用程序/设备。
- 开发者点击其中一个可用插件。
- 该插件开始通过 Flipper 公开的消息总线与设备上的应用通信。插件向应用索取必要数据，然后显示在桌面设备的用户界面上。
Meta 内部，手机、AR/VR、桌面应用等各种设备上的可用插件有很多。究其根本在于 Flipper 与数据无关，可以将数据流连接到插件显示器。所有 Flipper 核心（我们称之为 Flipper 服务器）都知道有哪些设备和支持 Flipper 的应用。我们希望能借此就为什么插件（和插件开发者！）对 Flipper 至关重要这一问题达成共识。
从图中可以得出的另一个重要结论是，Flipper 插件的状态是限时的，并会显示在用户界面中。
Meta 内部如何使用 js-flipper
Flipper 及其插件是 Meta 内部工程师在用的关键工具，它们涵盖了人们在移动世界中想要调试的大部分用例和数据流。大约三年前，当时正在针对移动平台开发 JS 应用的两个团队询问能否实现类似调试体验——他们正在构建基于 KaiOS 的 Facebook 应用和新的移动版 Facebook 网站。
这两个项目都与移动版 Facebook 客户端共享了大量基础设施和定制解决方案，而且很多现有插件都可以重复使用。因此，我们决定实现一个基于 WebSocket 的客户端，从开箱即用的插件生态系统中受益。js-flipper 的第一个版本就是这样诞生的，我们称之为 flipper-js-client-sdk。
js-flipper 的第二个重要用例是意外出现的。我们采用 VS Code 来进行定制构建，其中包含多个内部构建扩展程序。与移动 JS 应用类似，VS Code 的核心部分及其扩展程序可以从既有插件中受益，特别是从那些为遥测和性能调试而构建的插件中受益。
在这两种用例下，我们都可以采取一种替代方法，即构建 Chrome 开发者工具扩展程序来复制现有 Flipper 插件，并在此基础上将数据传输给它们。然而，现有生态系统和开发新 Flipper 插件的便捷性远胜过替代方案。此外，我们还可以调试无法访问 Chrome 开发者工具的 JS 应用。基于 WebSocket 的库提供了很大的灵活性。
js-flipper 的适用场景
以下是适合使用 js-flipper 的一些场景：
- 在共享基础设施和逻辑的情况下，将调试体验从移动应用扩展到网页应用。js-flipper 可以为移动开发者提供功能，并使各平台的用户体验保持一致。它既可以用于定制构建，也可以用于开源插件。
- 调试基于 JS 的复杂（有时是分布式的）应用。在我们的案例中，调试对象是指基于 VS Code 及其扩展程序的应用。基于 WebSocket 的通信协议使 js-flipper 几乎可以在任何地方插入，让开发者能够从使用 Flipper 插件进行调试中受益。
- js-flipper 提供了另一种调试 React Native 应用的方式。详见 GitHub 上的帖子串。
在 Flipper GitHub 讨论区分享您的想法和成功案例！
后续步骤
如果您想了解更多关于消息协议的技术细节，或者想了解如何支持一个新平台，请查看 Flipper 博客中的这篇博文。
Flipper 由 Meta 提供支持。我们团队的目标是支持将 Flipper 用作基于插件的平台，我们为其维护基础设施。我们通常不投资开发单个插件，但我们确实喜欢改进插件。
因此，我们在问题追踪器中将许多请求标记为 PR Welcome。贡献变更应该像克隆存储库并在桌面设备上/文件夹中运行 yarn && yarn start 一样简单。
我们期待收到您的拉取请求！
如需了解有关 Meta Open Source 的更多信息，请访问我们的 Open Source 网站、订阅我们的 YouTube 频道，或在 Twitter、Facebook 和 LinkedIn 上关注我们。
