Expo x React Native DebuggerでUIデバッグ

概要

SimulatorでWeb開発でやるようなInspectを出来るようにする方法を書いておきます。

React Native Debuggerをインストール

caskでreact-native-debuggerをインストールします。

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

React Native Debuggerの設定をExpo用に変更

React Native Debuggerを開いて、Debugger > Open Config Fileを選択します。

.rndebuggerrcという設定ファイルが開かれるので、defaultRNPackagerPortsをExpo用に19001に変更します。

- defaultRNPackagerPorts: [8080]
+ defaultRNPackagerPorts: [19001],

デバッグ方法

上記までが終わったら、一度expoを再起動します。

これしなくてエラーが出た

再起動したら、Simulatorを立ち上げます。
以下はiOS Simulatorで進めます。

SimulatorでDebug JS RemotelyをONに

Simulator上でCmd + Dでメニューを開きます。
すると以下のようにメニューが出るので、Debug Remote JSをタップします。

React Native Debuggerを起動

React Native Debuggerを起動して、iOS Simulatorをリフレッシュすると以下のような小さいメニューが出るので、InspectをタップするとWeb開発のようなInspectが出来るようになります。