🍉

[Expo] ReactNativeDebuggerの導入過程

2 min read

はじめに

地味に苦戦したので備忘録
本記事はReactNativeDebugger(以下、RNDebugger)導入過程の説明であり、使用方法には触れません。
また最後の方では設定を見直すセクションもあるため、一度全てに目を通した上で参考にしていただいた方が手間が省けるかと思います。

公式はこちら

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

react-native-debuggerのインストール

詳細は公式のREADMEを参考にしてください。

ダウンロード方法は以下の2通り。

  1. リリースページからダウンロード
    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に従い起動していく

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

ログインするとコメントできます