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が出来るようになります。
Author And Source
この問題について(Expo x React Native DebuggerでUIデバッグ), 我々は、より多くの情報をここで見つけました https://qiita.com/sayama0402/items/cdc4b460bffb9f92461f著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .