はじめに
expoを使ってreact-nativeで開発している際のデバック方法でreact-native-debuggerがあります。実機で動作を確認する際のデバック設定が少し面倒だったためまとめます。reduxのデバックがメインです。
アプリのインストール
まず最初にreact-native-debuggerのアプリをここからインストールします。
node_modulesの編集
次にnode_modules/react-native/Libraries/Core/Devtools/setupDevtools.jsを開いて下さい。
52行目のhostの部分を編集します。Your IPのところは今繋がっているIPアドレスを入れて下さい。Macの場合はIPアドレスは、システム環境設定→ネットワーク→状況のところの「IPアドレスhogehogeが設定されています。」のところにあります。編集後↓
App.jsの編集
App.jsをこんな感じにします。
ポイントは
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
です。最初はこれがなくてうまくいきませんでした。
設定はこれで終わりです。
手順
-
http://localhost:<port>/debugger-uiを閉じて下さい - react-native-debuggerのアプリを起動して下さい
- スマホの方のDebug JS Remotelyを有効にして下さい
-
REACT_DEBUGGER="unset ELECTRON_RUN_AS_NODE && open -g 'rndebugger://set-debugger-loc?port=19001' ||" npm startでプロジェクトを起動して下さい。