鳍式React本机应用程序调试

React Native v0.62 was released with Flipper integrated by default, and this is changing way RN apps are debugged today.

React Native v0.62是默认情况下与Flipper集成在一起发布的，这正在改变RN应用程序今天的调试方式。

In a recent blog post, Facebook announced React Native version 0.62, and one of the top features of this release was a default integration of Flipper.

在最近的博客文章中， Facebook宣布了React Native版本0.62 ，该版本的主要功能之一是Flipper的默认集成。

Flipper is an open source mobile debugging platform backed by Facebook. It is widely used by Android & iOS developers. Flipper’s simple and intuitive interface helps developers to visualise, inspect & control apps. It aims to be the number one companion for mobile app development.

Flipper是由Facebook支持的开源移动调试平台。 它被Android和iOS开发人员广泛使用。 Flipper的简单直观的界面可帮助开发人员可视化，检查和控制应用程序。 它旨在成为移动应用程序开发的第一伙伴。

Bringing Flipper to React Native—IMHO—is the beginning of new developer experience for React Native apps.

将Flipper带入React Native(IMHO)是React Native应用程序新开发人员体验的开始。

特征 (Features)

Flipper enables RN developers to look deep inside their apps. Features like inspecting the native layout, monitoring the redux state, and testing deep linking will definitely boost development speed. Let’s dive into some awesome features Flipper is offering for RN apps.

Flipper使RN开发人员可以深入了解他们的应用程序。 检查原生布局，监视redux状态以及测试深度链接等功能肯定会提高开发速度。 让我们深入了解Flipper为RN应用程序提供的一些很棒的功能。

React DevTool和实时编辑 (React DevTool & Live Editing)

React.js is well-known and well-regarded for its developer experience. It’s not just about React’s APIs—Facebook has also done a good job investing in React’s DevTool. Leveraging the React DevTool gives developers a complete picture of their component trees and helps in understanding an app’s behavior.

React.js以其开发人员的经验而闻名和备受推崇。 这不仅涉及React的API，Facebook在投资React的DevTool方面也做得很好。 利用React DevTool为开发人员提供有关其组件树的完整图片，并有助于了解应用程序的行为。

With Flipper, React DevTool is available to use by default and allows developers to update a component’s styles on the fly without any refresh. Here is a short demo:

有了Flipper，默认情况下就可以使用React DevTool，并且允许开发人员在不进行任何刷新的情况下即时更新组件的样式。 这是一个简短的演示：

原生布局检查 (Native Layout Inspect)

React Native transforms all components written in JS to the relevant native UI elements, depending on the target platform. This is the secret sauce behind the native feel of RN apps.

React Native会根据目标平台将用JS编写的所有组件转换为相关的本机UI元素。 这是RN应用程序本机感觉背后的秘密调味料。

Without Flipper, inspecting the native layout of a RN app required a good deal of effort on both Android & iOS. For Android, Android Studio has its layout inspector that shows all UI elements. For iOS, Xcode’s has a Debug View Hierarchy option. Native UI elements and their associated properties are now easily accessible via Flipper’s layout inspect for both platforms in one window. Here’s what this looks like:

如果没有Flipper，则要检查RN应用程序的本机布局，需要在Android和iOS上进行大量工作。 对于Android，Android Studio的布局检查器可显示所有UI元素。 对于iOS，Xcode具有Debug View Hierarchy选项。 现在，可以通过Flipper的布局检查功能在一个窗口中轻松访问本机UI元素及其相关属性。 看起来是这样的：

网络检查 (Network Inspect)

Besides being able to inspect UI app layers in detail, Flipper has an interface to inspect all of the network requests made by your API. Though this feature was available with the previous RN Debugger, having it in one place will further speed up development. Here’s how the Rest API call looks in this inspector:

除了能够详细检查UI应用程序层外，Flipper还具有一个界面来检查API发出的所有网络请求。 尽管此功能在以前的RN Debugger中可用，但将其放在一个地方将进一步加快开发速度。 在此检查器中，Rest API调用的外观如下：

地铁和模拟器动作 (Metro & Simulator Actions)

The most frequently used keys as a React Native developer are CMD + R—i.e reloading a JavaScript bundle. Flipper gives shortcuts for most commonly used metro actions—Reload JS & Open Dev Menu.

作为React Native开发人员，最常用的键是CMD + R-即重新加载JavaScript包。 Flipper提供了最常用的Metro操作的快捷方式-重新加载JS和Open Dev Menu。

Beside metro actions, Flipper also offers shortcuts for simulator actions. We can take new screenshots and record our screens as we develop our apps.

除了地铁操作外，Flipper还提供了模拟器操作的快捷方式。 在开发应用程序时，我们可以获取新的屏幕截图并记录屏幕。

共享首选项 (Shared Preferences)

Shared preferences allow us to handle an app’s preferences from Flipper without navigating around other menus and/or code. These preferences include features like enabling debug bundling and minification.

共享的首选项使我们能够从Flipper处理应用的首选项，而无需浏览其他菜单和/或代码。 这些首选项包括启用调试捆绑和最小化之类的功能。

图像检查-仅Android (Image Inspect — Android Only)

Just like with network inspect, we can monitor the fetch and cache of all the images rendered in our apps. An image cache can also be removed from Flipper.

就像网络检查一样，我们可以监视应用程序中渲染的所有图像的获取和缓存。 图像缓存也可以从Flipper中删除。

Images also have useful attributes that allow us to monitor from where they are loaded and how long it took. Currently this plugin uses a Fresco backend and is only available for Android.

图像还具有有用的属性，可让我们监视从何处加载图像以及花费了多长时间。 当前，此插件使用Fresco后端，仅适用于Android。

崩溃报告器 (Crash Reporter)

Monitoring app crashes was one of the most tedious tasks for RN developers prior to Flipper. With Flipper’s Crash Reporter, we can easily check the stack trace of a crash occurring on devices.

在Flipper之前，监视应用程序崩溃是RN开发人员最繁琐的任务之一。 使用Flipper的崩溃报告器，我们可以轻松地检查设备上发生的崩溃的堆栈跟踪。

深度链接-仅适用于Android (Deep Linking — Android Only)

Another pain point for app developers is figuring out how to simulate launching an app with deep links. This is currently done via CLI commands for Android & iOS, and in certain cases it’s a sophisticated process to monitor logs for such app launches. Flipper allows developers to launch apps with defined deep linking, which can help speed up development cycles.

应用程序开发人员的另一个痛苦点是弄清楚如何模拟具有深层链接的应用程序的启动。 目前，这是通过适用于Android和iOS的CLI命令完成的，在某些情况下，这是监视此类应用程序启动日志的复杂过程。 Flipper允许开发人员启动具有定义的深层链接的应用程序，这可以帮助加快开发周期。

Looking for a spark to take your apps to the next level? Machine learning enables powerful, highly-personalized mobile experiences. Subscribe to the Fritz AI Newsletter to learn how.

寻找火花将您的应用程序提升到一个新的水平？ 机器学习可提供强大的，高度个性化的移动体验。 订阅Fritz AI新闻通讯以了解操作方法。

外挂程式 (Plugins)

One of the most important advantages of Flipper is its ability to extend. It includes an option for developers to write their own plugins to support their workflows. Moving forward, this will make Flipper one of the best debugging tools available. We’ll soon see a lot of great plugins coming from the community to further enhance how React Native apps are debugged.

Flipper的最重要优点之一是其扩展能力。 它包括供开发人员编写自己的插件以支持其工作流程的选项。 展望未来，这将使Flipper成为可用的最佳调试工具之一。 我们很快就会看到社区中有很多很棒的插件，可以进一步增强React Native应用程序的调试方式。

I’ve cherry-picked a few useful plugins that are already available today, just to give you a taste.

我挑选了一些有用的插件，这些插件今天已经可用，只是为了给您一个品尝。

React本机性能[ 链接 ] (React Native Performance [Link])

One of the fey factors for an app’s success is its startup time. Though RN has a way to monitor the startup of our apps, it requires a not insubstantial amount of coding. This plugin makes it way easier. A life saver for benchmarking different optimizations.

应用程序成功的不利因素之一是其启动时间。 尽管RN可以监视我们的应用程序的启动 ，但是它需要大量的编码。 该插件使其更容易。 节省生命的工具，用于对各种优化进行基准测试。

Redux检查器[ 链接 ] (Redux Inspector [Link])

Redux as a state management tool has been a backbone of React apps for a long time now, and the Redux DevTool is one of the most integral parts of the development process. This plugin will make Flipper a one-window solution for managing Redux store, UI elements, network requests, and many other aspects of our apps.

长期以来，作为状态管理工具的Redux一直是React应用程序的骨干，而Redux DevTool是开发过程中最不可或缺的部分之一。 这个插件将使Flipper成为一站式解决方案，用于管理Redux存储，UI元素，网络请求以及我们应用程序的许多其他方面。

中继DevTools [ 链接 ] (Relay DevTools [Link])

Similar to React, Facebook has invested in the developer experience of Relay, as well. Relay DevTool is derived from React DevTool and eases the debugging of Relay-based applications. Flipper’s plugin for the Relay DevTool is also now available.

与React相似，Facebook也投资了Relay的开发经验。 Relay DevTool源自React DevTool，简化了基于Relay的应用程序的调试。 Flipper的Relay DevTool插件现在也可用。

什么样的未来？ (What lies ahead?)

A consistent pain points for RN developers has long been the default debugging tool framework. Flipper looks to be a promising start for a new debugging experience for React Native developers. With the ability to integrate community-made plugins, it also has the potential to grow into one of the best debugging tools available.

RN开发人员一直以来的一个难题是默认调试工具框架。 Flipper似乎是React Native开发人员获得新调试体验的有希望的开始。 凭借集成社区制作的插件的能力，它也有可能发展成为可用的最佳调试工具之一。

Editor’s Note: Heartbeat is a contributor-driven online publication and community dedicated to exploring the emerging intersection of mobile app development and machine learning. We’re committed to supporting and inspiring developers and engineers from all walks of life.

编者注： 心跳 是由贡献者驱动的在线出版物和社区，致力于探索移动应用程序开发和机器学习的新兴交集。 我们致力于为各行各业的开发人员和工程师提供支持和启发。

Editorially independent, Heartbeat is sponsored and published by Fritz AI, the machine learning platform that helps developers teach devices to see, hear, sense, and think. We pay our contributors, and we don’t sell ads.

Heartbeat在编辑上是独立的，由以下机构赞助和发布 Fritz AI ，一种机器学习平台，可帮助开发人员教设备看，听，感知和思考。 我们向贡献者付款，并且不出售广告。

If you’d like to contribute, head on over to our call for contributors. You can also sign up to receive our weekly newsletters (Deep Learning Weekly and the Fritz AI Newsletter), join us on Slack, and follow Fritz AI on Twitter for all the latest in mobile machine learning.

如果您想做出贡献，请继续我们的 呼吁捐助者 。 您还可以注册以接收我们的每周新闻通讯(《 深度学习每周》 和《 Fritz AI新闻通讯》 )，并加入我们 Slack ，然后继续关注Fritz AI Twitter 提供了有关移动机器学习的所有最新信息。

翻译自: https://heartbeat.fritz.ai/flipper-react-native-app-debugging-1d780115098e