react-native-qa-debugger v0.5.2
react-native-qa-debugger
Debugger for QA to help you debug your app and reproducible issues.
Installation
npm install react-native-qa-debugger
Usage
import { Debugger, logToDebugger } from 'react-native-qa-debugger';
// top level component
useEffect(() => {
logToDebugger({
label: 'App started',
data: 'Hopefully without a crash',
});
}, []);
<View style={styles.container}>
{/* Main app component */}
<Debugger getGlobalState={getGlobalState} />
</View>
Simple flow
- When required press or ask to press the button that you think will provide you desirable context
- *Retrieve the data to your device of choice, if required. Online services such as pastebin can help with that
- Paste the data to more readable environment such as browser console
- Debug
The flow
- Find open API to retrieve the data to. Such as webhook.site
- Use the url acquired, paste it to the "Send to" input and press the button
- Copy the data received from the request and go to github-pages made to help with visualizing and combing the data
- Paste the data and Debug
API Reference
<Debugger />
Main component that renders the debugger. Has to be mounted before logging any items
- getGlobalState?: () => Promise\ | any; - fn that returns the global state of the app for snapshots and logging. can be async
- disableSnapshots?: boolean; - flag to disable snapshots (might be useful for performance)
- sendToDefaultValue?: string; - preset input value for sending
- hideSwitcher?: boolean; - flag to hide the default switcher in case you want to use your own
- customSendRequest?: (text: string, debugItems: any[]) => void; - custom fn to send a request with debug items
logToDebugger(item)
Function to add item to debugger
- label | title?: string; - label of the item
- logType?: 'info' | 'success' | 'error' | 'warning'; - type of the item for coloring or the actual color code, fallbacks to 'info'
- type?: string; - info text as metadata to be used later for filtering
- data?: any; - actual data of the item
If no data provided the whole item will be considered as data field
toggleDebugger(toValue?: boolean)
Function to toggle debugger visibility, without toValue it toggles the flag
Extra utilities for customization
<DebuggerSwitcher />
Round button to toggle debugger visibility, for better custom positioning
useDebugItems() => debugItems, logToDebugger
Function to hook into debug items
getCompleteDebugItems(debugItems: any[]) => Promise<any[]>
Function to await snapshots of debug items
resetDebugItems()
Function to clear debugger
useShowDebugger() => show, toggleDebugger
Function to hook into current show state of the debugger
25 days ago
10 months ago
10 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago