react-native-debugger 0,1,2 eslint travis-ci npm

The standalone app for React Native Debugger, with React DevTools / Redux DevTools

React Native Debugger

Build Status Build status Windows Dependency Status devDependency Status

React Native Debugger

This is a standalone app for debugging React Native apps, it’s the same with official Remote Debugger, but we make it as a desktop app, and include React Developer Tools / Redux DevTools.

Installation

The prebuilt binaries can be found on the releases page.

For macOS, you can use Homebrew Cask to install:

$ brew update && brew cask install react-native-debugger

Usage

You must make sure all http://localhost:8081/debugger-ui pages are closed, then open the app to wait state, and reload JS with your simulator / device.

Also, you can use react-native-debugger-open, it will replace open debugger-ui with Chrome to open React Native Debugger from react-native packager.

Platform support

Debugger

The Debugger part is reference from react-native debugger-ui.

React DevTools

The React Developer Tools part from react-devtools/shells/electron, it will open a WebSocket server (port: 8097) to waiting React Native connection.

If you’re debugging with a real device, you need to edit node_modules/react-native/Libraries/Devtools/setupDevtools.js.

Get $r or global variables of react-native runtime in the console

You need to switch worker thread for console, open Sources tab on Chrome DevTools, and select debugger.worker.js in Threads.

Note for Android

It can be working directly on React Native ^0.30, for old versions, you need to add the following code:

if (__DEV__) {
  require('react-native/Libraries/Devtools/setupDevtools')();
}

And run adb reverse tcp:8097 tcp:8097 on your terminal. (For emulator, RN ^0.31 isn’t need adb reverse)

Redux DevTools

We used remotedev-app as a Redux DevTools UI, but it not need remotedev-server. That was great because it included multiple monitors and there are many powerful features.

The debugger will inject reduxNativeDevTools enhancer to global, you can add it to store:

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import reducer from '../reducers';

export default initialState => {
  const enhancer = compose(
    applyMiddleware(thunk),
    global.reduxNativeDevTools ?
      global.reduxNativeDevTools(/*options*/) :
      noop => noop
  );
  const store = createStore(reducer, initialState, enhancer);
  // If you have other enhancers & middlewares
  // update the store after creating / changing to allow devTools to use them
  if (global.reduxNativeDevTools) {
    global.reduxNativeDevTools.updateStore(store);
  }
  return store;
}

Options

Name Description
filters Map of arrays named whitelist or blacklist to filter action types.
actionSanitizer Function which takes action object and id number as arguments, and should return action object back. See the example bellow.
stateSanitizer Function which takes state object and index as arguments, and should return state object back. See the example bellow.
maxAge Number of maximum allowed actions to be stored on the history tree, the oldest actions are removed once maxAge is reached. Default is 30.
actionCreators Array or Object of action creators to dispatch remotely. See the example.

These options are same with remote-redux-devtools#parameters.

Development

# Just clone it
$ git clone https://github.com/jhen0409/react-native-debugger
$ cd react-native-debugger && npm install
$ npm run fetch-rdt # Fetch react-devtools source

# Run on development
$ npm run dev:webpack
$ npm run dev:electron

# Run on production
$ npm run build
$ npm start

# Run test
$ npm run lint
$ npm test

# Pack
$ npm run pack-macos
$ npm run pack-linux
$ npm run pack-windows
$ npm run pack # all

Credits

LICENSE

MIT

Related Repositories

react-native-debugger

react-native-debugger

The standalone app for React Native Debugger, with React DevTools / Redux DevTools ...

remote-redux-devtools-on-debugger

remote-redux-devtools-on-debugger

Injecting Remote Redux DevTools / RemoteDev monitor into React Native Debugger ...

react-native-layout-debug

react-native-layout-debug

React native layout debugger. ...


Top Contributors

jhen0409 kraffslol

Dependencies

package version
adbkit ^2.10.0
electron-context-menu ^0.9.1
electron-gh-releases ^2.0.4
electron-store ^1.2.0
get-port ^3.1.0
jsan ^3.1.9
multiline-template ^0.1.1
node-watch ^0.5.5
prop-types ^15.5.10
react ^15.6.1
react-devtools-core ^2.5.0
react-dom ^15.6.1
react-redux ^5.0.5
redux ^3.7.2
redux-devtools-instrument ^1.8.2
redux-persist ^4.8.1
remotedev-app ^0.10.8
remotedev-monitor-components ^0.0.5
remotedev-slider ^1.1.3
remotedev-utils ^0.1.4
ws ^3.0.0
dev babel-core ^6.25.0
babel-eslint ^7.2.3
babel-loader ^7.0.0
babel-plugin-closure-elimination ^1.1.16
babel-plugin-transform-class-properties ^6.24.1
babel-plugin-transform-decorators-legacy ^1.3.4
babel-plugin-transform-object-rest-spread ^6.23.0
babel-plugin-transform-react-constant-elements ^6.23.0
babel-plugin-transform-react-inline-elements ^6.22.0
babel-plugin-transform-react-remove-prop-types ^0.4.6
babel-preset-env ^1.5.2
babel-preset-react ^6.24.1
cross-env ^5.0.1
devtron ^1.4.0
electron ^1.7.5
electron-debug ^1.2.0
electron-devtools-installer ^2.2.0
electron-packager ^8.7.2
electron-rebuild ^1.5.11
eslint ^3.2.2
eslint-config-airbnb ^10.0.0
eslint-plugin-import ^1.12.0
eslint-plugin-jsx-a11y ^2.0.1
eslint-plugin-react ^6.0.0
expect ^1.20.2
mobx ^3.2.1
mobx-remotedev ^0.2.8
mocha ^3.4.2
raw-loader ^0.5.1
spectron ^3.6.4
style-loader ^0.18.2
uglifyjs-webpack-plugin ^1.0.0-beta.1
webpack ^3.0.0
webpack-dev-server ^2.5.1

Releases

-   v0.4.0 zip tar
-   v0.3.1 zip tar
-   v0.3.0 zip tar
-   v0.2.0 zip tar
-   v0.1.0 zip tar