介绍
Flipper是笔者在浏览Github的时候发现的一个神器,我想这对于移动开发者来说真的很不错——Flipper是用于调试iOS,Android和React Native应用程序的平台,来自于Facebook,目前star数量已达到6.6k。它通过简单的桌面界面可视化,检查和控制您的应用程序。日常可使用Flipper或使用插件API对其进行扩展。本文简单介绍一下这个提效的好助手,部分来自于翻译,不理解的地方可以直达Github查看项目相关的介绍!
![1d09ca4ce1798b915fc10f4d235abc69.png](https://i-blog.csdnimg.cn/blog_migrate/e0a2febad881f6e79f2de8e60ae54a9f.jpeg)
Github
https://github.com/facebook/flipper
特性
Flipper的目标是成为您在iOS和Android上进行移动应用开发的最佳伙伴。因此它提供了许多有用的工具,包括日志查看器,交互式布局检查器和网络检查器。
![c6001842778a2648a8d475b8d4ff9ea5.png](https://i-blog.csdnimg.cn/blog_migrate/928fb678e826b7e8d458899899f9c3a7.jpeg)
Flipper是作为平台构建的。除了使用已经包含的工具之外,还可以创建自己的插件来可视化和调试来自移动应用程序的数据。Flipper负责来回发送数据,调用函数以及侦听移动应用程序上的事件。
详细介绍
- 日志
日志插件显示设备日志,而无需任何其他设置。这是一个设备插件,这意味着它没有绑定到任何特定的应用程序,并且不需要其他设置即可查看日志。搜索栏可用于搜索日志并过滤某些类型。从表标题的上下文菜单中,您可以显示更多信息,例如时间戳,PID或TID。单击表中的标签,PID或TID,仅过滤具有相同值的日志。
![8e5ddd06325c63f9903d3e4373268187.png](https://i-blog.csdnimg.cn/blog_migrate/e0157b0a9ecbd1a7ce2651454ee2295e.jpeg)
侧边栏中的表达式监视程序可用于监视某些日志的发生并计数它们发生的频率。表达式可以是简单的字符串,也可以是与日志匹配的正则表达式。启用通知复选框后,一旦发生日志,Flipper将发送通知。这使您知道监视者何时触发,即使Flipper在后台。
- 布局检查器
Flipper中的Layout Inspector可用于大量不同的调试方案。首先,您可以检查层次结构由哪些视图组成以及每个视图具有哪些属性。当调试产品问题时,这非常有用。布局选项卡也支持Litho和ComponentKit组件。我们与这些框架集成在一起,以层次结构形式呈现组件,就好像它们是本机视图一样。我们向您展示组件的所有布局属性,属性和状态。布局检查器可以进一步扩展以支持其他UI框架。如果将鼠标悬停在Flipper中的视图或组件上,我们将突出显示应用程序中的相应项目。这是调试视图边界并确保您具有正确视觉填充的理想选择。
![8e0e2077f25601ec73a1d99c47b89d0d.png](https://i-blog.csdnimg.cn/blog_migrate/dff624e86297a47b59d9b9128ba602fc.jpeg)
布局检查器不仅允许您查看层次结构并检查每个项目的属性,而且还允许您编辑诸如布局属性,背景颜色,道具和状态之类的内容。实际上大多数事情。这使您可以快速调整填充,边距和颜色,直到对它们满意为止,而无需重新编译。这样可以节省许多时间来实施新设计。通过单击十字线图标启用目标模式。现在,您可以触摸设备上的任何视图,并且布局检查器将跳到布局层次结构中的正确位置。提示:目标模式也可以在运行Talkback 功能时使用。
- 导航
导航插件使用户可以快速导航到其移动应用程序中的深层链接,以帮助加快开发周期。该插件旨在轻松集成到您现有的导航框架中或作为独立工具。用户可以为深层链接添加书签,然后通过工具栏中的按钮跳转到它们。
![6d1062f358f012a32426655919461d62.png](https://i-blog.csdnimg.cn/blog_migrate/ee4b4ddd18977fe726bec9fa4b82751d.jpeg)
应用程序中的导航事件也可以记录到Flipper中。这使用户可以查看过去的导航事件并直接跳转到它们,或者导出导航事件以进行报告。
![d6a54390ca23949b7f8c9b93cb6f4095.png](https://i-blog.csdnimg.cn/blog_migrate/2ef7ea0e9085b8741dabb22a6885ee9c.jpeg)
- 网络
使用网络检查器检查应用程序中的传出网络流量。您可以轻松浏览正在发出的所有请求及其响应。该插件还支持压缩响应。
![3926661b1656696e73bd0ac8658d9706.png](https://i-blog.csdnimg.cn/blog_migrate/ea9e0f6fc9da4b0636490362d58084a7.jpeg)
从设备发送的所有请求将在插件中列出。单击请求以查看详细信息,例如标题和正文。您可以通过单击表中的相应值来为表过滤域,方法或状态。
- 数据库
数据库插件为开发人员提供了对其数据库的读写访问权限:
- 浏览表格数据
- 查看表格的结构
- 执行查询
- 将查询标记为收藏
- 查看过去执行的查询的日志
- 图片
使用图像插件,您可以检查获取了哪些图像,它们来自何处并有选择地清除缓存。当前,该插件支持Fresco作为后端。
![f91dabeb75ec44179d617aac49750570.png](https://i-blog.csdnimg.cn/blog_migrate/f3fad356621060dad24ef6b267d30f93.jpeg)
- 沙盒
沙盒插件允许开发人员通过将其指向沙盒环境来测试其应用程序中的更改。它提供了一个简单的UI,用于设置和修改指向直接在桌面上充当沙箱的开发主机的URL,从而防止您在应用程序内部输入可能很长且很复杂的URL。
- 共享首选项
轻松检查和修改应用共享首选项中包含的数据
![b3a68ce047ab378e1dae041ab463505f.png](https://i-blog.csdnimg.cn/blog_migrate/cb160ca34100330f2279f4f7a8ba7396.jpeg)
给定共享首选项文件的所有更改将自动显示在Flipper中。您也可以在Flipper中编辑值,并将其同步到设备。这可以通过单击要编辑的特定键的值,编辑值然后按Enter来完成。
- 异常崩溃报告
每当应用崩溃时,Crash Reporter插件都会在Flipper中显示一条通知。您可以单击通知以查看崩溃信息,例如stacktrace和其他元数据。对于Android,您可以单击“在日志中打开”按钮以跳转到日志插件中包含崩溃信息的行。
![9f178b68bd274acecd4104f73360ee34.png](https://i-blog.csdnimg.cn/blog_migrate/46100c5cdfd20870342eafd0c5eddc80.jpeg)
![b6b76471d181fd8744415d9435f07e6c.png](https://i-blog.csdnimg.cn/blog_migrate/0d4d6dada548c285843d4565f1a713c9.jpeg)
React Native支持
![8ba9a6158a2c3fef4442c45fb7602fb4.png](https://i-blog.csdnimg.cn/blog_migrate/d90b4a5810780cd39bbc68074efe3b60.jpeg)
PS:由于github访问不给力,笔者在此提供一个快速下载的方式,当然很多环境配置就需要各位各显身手了 私信本头条号关键字 flipper 或 Flipper 来获得三大桌面平台的快速下载方式,enjoy it!