【ReactNative】デバッガーの導入方法を解説！【react-native-debugger】

みなさん、こんにちは。どんぶラッコです。

今日はReactNativeのデバッガーを導入する手順についてまとめておこうと思います。

今回利用するのはこちら。 react-native-debugger です。

デバッグ内容をスタンドアローンのアプリで表示してくれる、超便利なやつです。

ReactNative 公式でもアナウンスされている RemoteDebugger をベースに作成されているようです。

では、早速使ってみましょう！

導入方法

ダウンロード方法はとても簡単。

リリースノートページから当該バイナリをダウンロードするだけです。

https://github.com/jhen0409/react-native-debugger/releases

macを使っている場合は Homebrew を使ってダウンロードも可能です。

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

React Native Debugger というアプリケーションが生成されていればOKです。

実は、もうこれでほぼ設定は完了です。

実際にアプリケーションを開いてみましょう。

すると、ポート番号 8081 に対してremote debuggerが起動します。

8081がデフォルト設定になっているので、もしexpoを使って開発してる場合は19001番に変更しておきましょう。

Debugger -> Open Config File を開きます

.rrndebuggerrc というファイルが開くので、 defaultRNPackagerPorts を書き換えてあげましょう。

もし一時的に変えたいだけであれば、

Debugger -> New Window (⌘T)

で新しいウィンドウを開いて…

ポート番号を指定すればOKです。

一つ前のウィンドウはもういらないので閉じちゃいましょう。

Reduxの中身も表示するには？

Reduxも表示したい場合は、 redux-devtools-extension を使うのが楽だよー、と案内されています。

こちらも導入方法が様々案内されていますが、一番シンプルなのは 1.3に書いてある npm パッケージを利用する方法です。

yarn add redux-devtools-extension
# npm install redux-devtools-extension

でパッケージを導入して、storeを書き換えます。以下は公式から引用です。

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';

const composeEnhancers = composeWithDevTools({
  // Specify name here, actionsBlacklist, actionsCreators and other options if needed
});
const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
  applyMiddleware(...middleware),
  // other store enhancers if any
));

これでOKです！

デバッガを便利に使って ReactNativeの開発を効率化していきましょう♪