A react native debugger with Built in UI and Remote Debugging options.
React Native Debugger requires React Native 0.35 or later.
npm install --save react-native-debugger
Device info component must be installed and set up on your project. Please fallow the installation guide here: https://github.com/rebeccahughes/react-native-device-info
React Native Debugger contains 5 core modules. These modules are responsible to maintain the module correct behaviour.
These are the available named exports of this module.
IMPORTANT: This module is not developed for production usage!
This module is responsible to set up the debugger and connect it to the Redux architecture.
Installation
Add createDebugger to your compose function.
createStore(rootReducer, compose(
createDebugger(),
applyMiddleware(...middlewares)
));
Parameters
- isVisible (Boolean|Required) - if true the debugger UI will be visible by default
- allowServerLogging (Boolean|Required) - if true the debugger will send the events to your debugger-server.
- serverUrl (String|Required) - debugger server url (see debugger-server)
- authorization (String|Required) Base auth hash, see details: How to generate auth hash
- eventTypes (Array|Required) - array of Event Objects you want to trigger
Events
IMPORTANT:
The module will display only the listed events!
- TYPE (String|Required) - event type (e.g NETWORK_REQUEST)
- CATEGORY_NAME (String|Required) - long category name to be displayed on the Debugger UI.
- EVENT_NAME (String|Required) - short category name to be displayed on the Debugger UI.
Example setup
createDebugger({
isVisible: true,
allowServerLogging: true,
serverUrl: 'http://mydomain.com/log',
authorization: 'YWRtaW46U2VjcmV0MTIz', <--- DEFAULT HASH
eventTypes: [
{
TYPE: 'NETWORK_REQUEST',
CATEGORY_NAME: 'Network request logging',
EVENT_NAME: 'Net. Request',
},
]
})
Add debuggerReducer to your combineReducers.
IMPORTANT:
Name debuggerReducer as debugger in your store!
combineReducers({
debugger: debuggerReducer,
...otherReducers,
})
This api is responsible for event triggering. Use this pice of code anywhere in your application to capture React Native Events.
Debugger.logAction({
label: 'My event',
type: 'NETWORK_REQUEST',
logType: 'SUCCESS',
data: myCustomData <-- Supported types: String, Array, Object
});
Debugger.EVENT_TYPES
- NONE use this type for neutral events
- ERROR use this type for error events
- WARNING use this type for warning events
- SUCCESS use this type for success events
UI implementation of React Native Debugger. Insert it in your main application container, on the top of your content!
<SafeView>
<StatusBar hidden />
<RenderScreen route={route} />
<Header />
<Tabbar />
<RenderOverlay />
<DebuggerUI /> <-- IT SHOULD BE ON THE TOP OF THE SCREEN
</SafeView>
Public Redux actions.
- showDebugger
- hideDebugger