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

Move plugin docs to plugin folders

Browse Source 
Summary: Moved plugin documentation and related assets to plugin folders, fixed links and configured redirects where required. Now these docs are used for both showing docs in Flipper and generating Flipper docs website.

Reviewed By: passy

Differential Revision: D29465567

fbshipit-source-id: 3ec4240b215b0d5baea5154f64266a9ba7ead3a5
This commit is contained in:
Anton Nikolaev
2021-06-29 17:39:37 -07:00
committed by Facebook GitHub Bot
parent 4ad7a70ee3
commit 039d3a4a08
24 changed files with 47 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
docs/features/crash-reporter-plugin.mdx
View File

@@ -1,14 +0,0 @@
---
id: crash-reporter-plugin
title: Crash Reporter
---
import useBaseUrl from '@docusaurus/useBaseUrl';
→ [See setup instructions for the Crash Reporter](../setup/crash-reporter-plugin.mdx)
The Crash Reporter Plugin shows a notification in Flipper whenever an app crashes. You can click on the notification to see crash information like stacktrace and other metadata. For Android, you can click the "Open in Logs" button to jump to the row in the Logs plugin with the crash information.
<img alt="UI" src={useBaseUrl("img/crashreporterplugin.png")} />
<img alt="Notification" src={useBaseUrl("img/crashreporterpluginnotification.png")} />

20
docs/features/databases-plugin.mdx
View File

@@ -1,20 +0,0 @@
---
id: databases-plugin
title: Databases
---
import useBaseUrl from '@docusaurus/useBaseUrl';
→ [See setup instructions for the Databases plugin](../setup/databases-plugin.mdx)
The Databases plugin provides developers with read-write access to their databases:
- browse your tables' data
- see your tables' structure
- execute queries
- mark queries as favorites
- see logs of past executed queries
<img alt="Databases Plugin 1" src={useBaseUrl("img/databases-plugin-1.png")} />
<img alt="Databases Plugin 2" src={useBaseUrl("img/databases-plugin-2.png")} />
Note: this plugin is only available for Android.

33
docs/features/images-plugin.mdx
View File

@@ -1,33 +0,0 @@
---
id: images-plugin
title: Images
---
import useBaseUrl from '@docusaurus/useBaseUrl';
→ [See setup instructions for the images plugin](../setup/images-plugin.mdx)
The images plugin allows you to inspect what images were fetched, where they are
coming from and selectively clear caches. Currently, the plugin supports
[Fresco](https://github.com/facebook/fresco/) as backend.
<img alt="Images plugin" src={useBaseUrl("img/images-plugin.png")} />
## Cache Inspector
Images are grouped by the different caching layers they are stored in. The current
fill rate of the cache is shown and you can choose to selectively clear caches.
## Attribution
Images can be annotated with attributes that can help to determine the context in
which an image was loaded and displayed. You can use that information to filter
by a particular surface or only inspect images that are in the critical path
of your application, for instance during cold start.
## Leak Tracking
Dealing with large resources can require special APIs to be used that circumvent
usual garbage collection. The plugin allows tracking `CloseableReference`s for
Fresco on Android that weren't properly closed, which can help you improve
the performance of your app.

2
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](logs-plugin), [Layout Inspector](layout-plugin) and [Network Inspector](plugins/network) 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), [Layout Inspector](plugins/inspector) and [Network Inspector](plugins/network) 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.
<img alt="Plugins" src={useBaseUrl('img/plugins.png')} />

36
docs/features/layout-plugin.mdx
View File

@@ -1,36 +0,0 @@
---
id: layout-plugin
title: Layout Inspector
---
import useBaseUrl from '@docusaurus/useBaseUrl';
→ [See setup instructions for the Layout Inspector](../setup/layout-plugin.mdx)
The Layout Inspector in Flipper is useful for a ton of different debugging scenarios. First of all, you can inspect what views the hierarchy is made up of as well as what properties each view has. This is incredibly useful when debugging issues with your product.
The Layout tab supports [Litho](https://fblitho.com) and [ComponentKit](https://componentkit.org) components as well. We integrate with these frameworks to present components in the hierarchy just as if they were native views. We show you all the layout properties, props, and state of the components. The layout inspector is further extensible to support other UI frameworks.
If you hover over a view or component in Flipper we will highlight the corresponding item in your app. This is perfect for debugging the bounds of your views and making sure you have the correct visual padding.
<img alt="Layout plugin" src={useBaseUrl("img/layout.png")} />
## Quick edits
The Layout Inspector not only allows you to view the hierarchy and inspect each item's properties, but it also allows you to edit things such as layout attributes, background colors, props, and state. Most things actually. This allows you to quickly tweak paddings, margins, and colors until you are happy with them, all without re-compiling. This can save you many hours implementing a new design.
## Target mode
Enable target mode by clicking on the crosshairs icon. Now, you can touch any view on the device and Layout Inspector will jump to the correct position within your layout hierarchy.
Tip: Target mode also works with Talkback running.
## Accessibility mode (Android-only)
Enable accessibility mode by clicking on the accessibility icon. This shows the accessibility view hierarchy next to the normal hierarchy. In the hierarchy, the currently accessibility-focused view is highlighted in green and any accessibility-focusable elements have a green icon next to their name. The hierarchy's context menu also allows you to focus accessibility services on certain elements. When selecting an element in one hierarchy, the corresponding element in the other will also be highlighted. The hierarchies expand and collapse in sync, and searching through the main hierarchy works in accessibility mode as well.
When accessibility mode is enabled, the sidebar will show special properties that are used by accessibility services to determine their functionality. This includes things like content-description, clickable, focusable, and long-clickable among others.
### Talkback
The accessibility mode sidebar also includes a panel with properties derived specifically to show Talkback's interpretation of a view (with logic ported over from Google's Talkback source). While generally accurate, this is not guaranteed to be accurate for all situations. It is always better to turn Talkback on for verification.

14
docs/features/leak-canary-plugin.mdx
View File

@@ -1,14 +0,0 @@
---
id: leak-canary-plugin
title: LeakCanary
---
import useBaseUrl from '@docusaurus/useBaseUrl';
→ See setup instructions for [LeakCanary 1](../setup/leak-canary-plugin.mdx) or [LeakCanary 2](../setup/leak-canary-2-plugin.mdx)
The LeakCanary plugin provides developers with Flipper support for [LeakCanary](https://github.com/square/leakcanary), an open source memory leak detection library.
Leaks detected by LeakCanary will appear automatically in Flipper. Each leak will display a hierarchy of objects, beginning from the garbage collector root and ending at the leaked class.
Selecting any object in this list will display contents of the object's various fields.
Note: this plugin is only available for Android.

19
docs/features/logs-plugin.mdx
View File

@@ -1,19 +0,0 @@
---
id: logs-plugin
title: Logs
---
import useBaseUrl from '@docusaurus/useBaseUrl';
The Logs plugin shows device logs without any additional setup. This is a device plugin, meaning that it is not tied to any specific app and there is no additional setup needed to see the logs.
<img alt="Logs plugin" src={useBaseUrl("img/logs.png")} />
## Filtering
The search bar can be used to search for logs and filter for certain types. From the context menu on the table headers you can show more infos like timestamp, PID or TID. Click on a tag, PID or TID in the table to filter only for logs with the same value.
## Expression watcher
The expression watcher in the sidebar can be used to watch for certain logs to happen and count how often they occur. An expression can be a simple string, or a regular expression which is matched against the logs.
When the notify checkbox is enabled, Flipper will send notifications once the log is happening. This lets you know when the watcher triggered, even if Flipper is in the background.

15
docs/features/navigation-plugin.mdx
View File

@@ -1,15 +0,0 @@
---
id: navigation-plugin
title: Navigation
---
import useBaseUrl from '@docusaurus/useBaseUrl';
→ [See setup instructions for the Navigation Plugin](../setup/navigation-plugin.mdx)
The Navigation Plugin allows users to quickly navigate to deep links within their mobile applications to help speed up the development cycle. The plugin is designed to integrate easily within your existing navigation framework or as a stand alone tool. Users can bookmark deep links and jump to them via the button in the tool bar.
<img alt="Navigation Plugin Button" src={useBaseUrl("img/navigation-plugin-1.png")} />
Navigation events within the app can also be logged to Flipper. This allows the user to view past navigation events and jump straight to them, or export the navigation events for reporting.
<img alt="Navigation Plugin UI" src={useBaseUrl("img/navigation-plugin-2.png")} />

9
docs/features/sandbox-plugin.mdx
View File

@@ -1,9 +0,0 @@
---
id: sandbox-plugin
title: Sandbox
---
import useBaseUrl from '@docusaurus/useBaseUrl';
→ [See setup instructions for the Sandbox plugin](../setup/sandbox-plugin.mdx)
The sandbox plugin allows developers to test changes in their apps by pointing them to a sandbox environment. It provides a simple UI to set and modify the URL to a development host that acts as a sandbox directly on the desktop, which prevents you from entering potentially long and complicated URL inside your app.

13
docs/features/shared-preferences-plugin.mdx
View File

@@ -1,13 +0,0 @@
---
id: shared-preferences-plugin
title: Shared Preferences
---
import useBaseUrl from '@docusaurus/useBaseUrl';
→ [See setup instructions for the Shared Preferences plugin](../setup/shared-preferences-plugin.mdx)
Easily inspect and modify the data contained within your app's shared preferences.
<img alt="Shared Preferences Plugin" src={useBaseUrl("img/shared-preferences.png")} />
All changes to the given shared preference file will automatically appear in Flipper. You may also edit the values in Flipper and have them synced to your device. This can be done by clicking on the value of the specific key you wish to edit, editing the value and then pressing enter.