🍉
[Expo] ReactNativeDebuggerの導入過程
はじめに
地味に苦戦したので備忘録
本記事はReactNativeDebugger（以下、RNDebugger）導入過程の説明であり、使用方法には触れません。
また最後の方では設定を見直すセクションもあるため、一度全てに目を通した上で参考にしていただいた方が手間が省けるかと思います。
公式はこちら
react-native-debuggerのインストール
詳細は公式のREADMEを参考にしてください。
ダウンロード方法は以下の2通り。
- リリースページからダウンロード
2. Homebrewを使用してダウンロード
なお、HomeBrewのバージョンによってコマンドが異なるため、各自の環境に合わせて実行してください。
< Homebrew 2.6.0
$ brew update && brew cask install react-native-debugger
>= Homebrew 2.6.0
$ brew install --cask react-native-debugger
Getting Startedに従い起動していく
RNDebuggerの起動
Launch RNDebugger by typing the following command:
PORT8081で起動
$ open "rndebugger://set-debugger-loc?host=localhost&port=8081"
Debugger > Open Config Fileを選択し
.rndebuggerrcを以下の通り変更する。
- defaultRNPackagerPorts: [8080]
+ defaultRNPackagerPorts: [19001]
Expoの起動
Special case of Expo (CRNA):
REACT_DEBUGGER="unset ELECTRON_RUN_AS_NODE && open -g 'rndebugger://set-debugger-loc?port=19001' ||" npm start
今回は、iosシュミレータで起動する
左側のメニューから、Run on iOS simulatorを実行
起動したら、cmd + dを押し、Debug Remote JSを実行
Errorの対応
自分はこんなエラーが出ました。
issueでは、chromeのキャッシュが〜などの話が出ていましたが
自分は、
- chromeのキャッシュを一度クリア
- RNDebugger、Expoを再起動
- RNDebuggerで
cmd+t、PORTを19000に設定
することで治りました。
なので、先ほど記載した
REACT_DEBUGGER="unset ELECTRON_RUN_AS_NODE && open -g 'rndebugger://set-debugger-loc?port=19001' ||" npm start
ですが、19001ではなく19000にすればよい？
各自の環境設定にも左右されそうです。
.rndebuggerrcの設定も19000になるかもしれないです。
あくまで公式に従って、導入した手順では19001だったのでそのまま記載しました。
Discussion