ExpoアプリにReact Native Debuggerをセットアップする方法 [Mac OS用]

[2019年3月20日にアップデート]
フルフルの英語記事はこちら

ExpoのアプリでReduxデバッグをしたい時にはReact Native Debuggerがオススメです。React Native DebuggerならChrome Devtools, React Devtools, Redux Devtoolsの三種の神器が一つの画面に集約できます。

##1. React Native Debuggerをインストールする。

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

##2. React Native Debuggerを開く

open ‘rndebugger://set-debugger-loc?host=localhost&port=19001’

(デフォルトのportは8081ですが、Expoは19001を使っています。)
##3. Expoアプリをスタートし、デバッグモードをonにする

npm start

Expo Clientでアプリを開き、フリフリして、Debug Remote JSを選択。
これで、Chrome Devtoolsは繋がっているはずです。

##4. React Devtoolsのセットアップ
Docsによれば、実機でアプリを確認する際は、今一歩セットアップが必要な場合があるようです。

setupDevtools.jsのファイルをnode_modules/react-native/Libraries/Core/Devtools/setupDevtools.jsから開き、connectToDevToolsにパスするobjectのprop、"host"に自分のlocal IPを入れます。

Local IPはこのサイトでチェックできます。

##5. Redux Devtoolsのセットアップ
window.REDUX_DEVTOOLS_EXTENSIONはデフォルトで与えられているので、Webの時と同様です。

ただし、古いバージョンではデフォルトで与えられていませんでした。その際は、redux-devtools-extensionをnpm iし、以下のようにする。

以上で、セットアップ完了です。

P.S.ネットワークリクエストを見る際は、React DevtoolsとRedux Devtools辺りで、右クリックし、Enable Network Inspectを押してください。