jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

index.mdx and share-flipper-data.mdx

Browse Source 
Summary: Restyle of Flipper docs, including spelling and grammar checks, link checks, and structure (where relevant).

Reviewed By: nikoant

Differential Revision: D35552028

fbshipit-source-id: f7b0079944ff788c0b7a5a13be1585df398cdd3c
This commit is contained in:
Kevin Strider
2022-04-12 06:00:48 -07:00
committed by Facebook GitHub Bot
parent 92f88e877b
commit 1d10dbe603
2 changed files with 21 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/features/index.mdx
View File

@@ -4,7 +4,7 @@ title: Features
---
import useBaseUrl from '@docusaurus/useBaseUrl';
Flipper itself only provides the architectural platform. What makes it useful are the plugins built on top of it: [Logs](plugins/device-logs.mdx), [Layout Inspector](plugins/inspector.mdx) and [Network Inspector](plugins/network.mdx) are all plugins. Plugins can be built very specific to your business logic and the use-cases you have in your app. We are shipping Flipper with a couple of built-in all-purpose plugins, but we encourage you to build your own. Each plugin needs to be enabled individually.
Flipper itself only provides the architectural platform. What makes it useful are the plugins built on top of it: [Logs](plugins/device-logs.mdx), [Layout Inspector](plugins/inspector.mdx) and [Network Inspector](plugins/network.mdx) are all plugins. Plugins can be built very specific to your business logic and the use-cases you have in your app. Flipper is shipped with a couple of built-in all-purpose plugins, but you're encouraged to [build your own](#build-your-own-plugin). Each plugin needs to be enabled individually.
<img alt="Plugins" src={useBaseUrl('img/plugins.png')} />
@@ -12,4 +12,4 @@ Flipper itself only provides the architectural platform. What makes it useful ar
The Flipper desktop app and the mobile native SDK establish a connection which is used to send data to and from the device. Flipper does not make any restrictions on what kind of data is being sent. This enables a lot of different use-cases where you want to better understand what is going inside your app. For example you can visualize the state of local caches, events happening or trigger actions on your app from the desktop.
If there is no plugin that does exactly what you want, you can build your own plugin, tailored to your needs. A plugin always consists of the native implementation sending and receiving data and the desktop plugin visualizing data. Learn more on how to [extend Flipper](../tutorial/intro.mdx) and build your own plugin. The native implementations are written in Java, Objective-C, or C++, the desktop UI is written in React.
If there is no plugin that does exactly what you want, then you can build your own plugin tailored to your needs. A plugin always consists of the native implementation sending and receiving data and the desktop plugin visualizing data. To learn more and build your own plugin, see the [extend Flipper](../tutorial/intro.mdx) page. The native implementations are written in Java, Objective-C, or C++, the desktop UI is written in React.

26
docs/features/share-flipper-data.mdx
View File

@@ -4,22 +4,32 @@ title: Share Flipper Data
---
import useBaseUrl from '@docusaurus/useBaseUrl';
Flipper's diagnostic and profiling data is often used for debugging. But sometimes you can not solve the problem on your own and need some help from your colleagues. Rather than just sending screenshots, you can share the data you are seeing in Flipper with them. This includes all logs, the layout hierarchy, network requests, etc. and helps to get the bigger picture of why something didn't work as expected.
Flipper's diagnostic and profiling data is often used for debugging. However, sometimes you can't solve the problem on your own and need some help from your colleagues. In such cases, rather than just sending screenshots, you can share the data you are seeing in Flipper (such as logs, layout hierarchy, network requests, and other relevant objects) with your colleague, which helps them to get the bigger picture of why something doesn't work as expected.
## Export Flipper Data
## Export Flipper data
You can export Flipper's data in a `.flipper` file. For the export to work, an active device needs to be connected to Flipper. Make sure you have selected the device you want to export in Flipper's device dropdown:
:::note
You can export Flipper's data in a `.flipper` file.
:::
To export Flipper data, take the following steps:
1. An active device needs to be connected to Flipper, so ensure you've selected the device you want to export in Flipper's device dropdown.
<img alt="selectedDevice" src={useBaseUrl("img/shareFlipperData/selectedDevice.png")} />
To export Flipper's into a file, select "File" → "Export" from the menu bar and save it where ever you like. This file now can be shared with your colleagues.
2. From the Menu Bar, select 'File' → 'Export"' then save it wherever you like.
**Caution:** Bear in mind that the file will include all the data available to the plugins, including for example any access tokens in recorded network requests.
The exported data can now be shared with your colleagues.
## Import Flipper Data
:::caution
Bear in mind that the file will include all the data available to the plugins (such as access tokens in recorded network requests)!
:::
Opening a `.flipper` file imports all the data and allows you to use Flipper as if the device was connected. However, note the device is marked as "offline". This means, while you are able to see all the date, you can not interact with it (e.g. change a view's background color), because the actual device is not present.
## Import Flipper data
Opening a `.flipper` file imports all the data and allows you to use Flipper as if the device was connected. However, the device is marked as 'offline' (see the following screenshot). Since the device is not present, this means that while you are able to see all the data, you can't interact with it (for example, changing a view's background color).
<img alt="importedDevice" src={useBaseUrl("img/shareFlipperData/importedDevice.png")} />
For advanced users, Flipper also provides a URL handler to import data. Linking to `flipper://import/?url={LINK_TO_FLIPPER_FILE}` will launch Flipper and display the downloaded data.
For advanced users, Flipper also provides a URL handler to import data. For example, linking to `flipper://import/?url={LINK_TO_FLIPPER_FILE}` will launch Flipper and display the downloaded data.