react-native-debugger

A react native debugger with Built in UI and Remote Debugging options.

Installation

React Native Debugger requires React Native 0.35 or later.

NPM Module

npm install react-native-debugger

Setup

React Native Debugger contains 5 core modules. These modules are responsible to maintain the module correct behaviour.

• createDebugger
• debuggerReducer
• Debugger
• DebuggerUI
• actions

These are the available named exports of this module.

---

createDebugger

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 mudule will display only the listed events!

• TYPE (String|Required) - event type (e.g NETWORKREQUEST)
• CATEGORYNAME (String|Required) - long category name to be displayed on the Debugger UI.
• EVENTNAME (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',
		},
	]
})

---

debuggerReducer

Add debuggerReducer to your combineReducers.
IMPORTANT:
Name debuggerReducer as debugger in your store!

combineReducers({
	debugger: debuggerReducer,
	...otherReducers,
})

---

Debugger

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.EVENTTYPES

• 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

DebuggerUI

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>

actions

Public Redux actions.

• showDebugger
• hideDebugger

Screenshots