こんにちは。今日は、React Nativeのデバッガーの1つである、React Native Debuggerの導入方法について整理しておきたいと思います。
Contents
前提
Mac + React Native (0.64.x) + Expoで開発をしています。
React Native Debuggerとは?
https://github.com/jhen0409/react-native-debugger
React Native Debuggerを使えるようにするまで
React Native Debuggerのインストール
インストールの方法は2つあります。1つは以下サイトからzipをダウンロートしてきてインストールする方法。
https://github.com/jhen0409/react-native-debugger
もう一つはMac向けパッケージ管理ツールであるhomebrewを使ってインストールする方法。今回私はこちらの方法でインストールしました。(brewコマンドの仕様が変わったらしく、上のブログのコマンドだとコケます。caskオプションを–caskのように指定してやる必要があるようです)
brew update && brew install react-native-debugger --cask
React Native Debuggerの初期設定
インストールが完了したら、React Native Debuggerアプリが追加されていることが確認できますので、起動します。
![](https://i0.wp.com/www.simpletraveler.jp/wp-content/uploads/2021/12/image.jpg?resize=728%2C85&ssl=1)
Open Config Fileから、設定ファイルを開き、
![](https://i0.wp.com/www.simpletraveler.jp/wp-content/uploads/2021/12/image-1.jpg?resize=728%2C656&ssl=1)
defaultRNPackagerPortsに、Expoのデフォルトポートである19001(場合によっては19000とかの場合も。Expoでアプリ起動した時のポートに合わせてください)を追加して、ツールを再起動します。
![](https://i0.wp.com/www.simpletraveler.jp/wp-content/uploads/2021/12/image-2.jpg?resize=728%2C410&ssl=1)
Expoアプリ側でRemote Debugを有効化する
Expoアプリを起動した状態で(iOS Simulator上でも)、Ctrl + Command + Zを押すと、以下のメニューが出てくるので「Debug Remote JS」をクリックします。
![](https://i0.wp.com/www.simpletraveler.jp/wp-content/uploads/2021/12/image.png?resize=700%2C802&ssl=1)
すると、Debuggerの方にコンソールログなどが流れてくるようになりました!!
![](https://i0.wp.com/www.simpletraveler.jp/wp-content/uploads/2021/12/image-1-1.jpg?resize=728%2C160&ssl=1)
以上、React Native Debuggerを導入して使えるようにするまでの手順でした!
次の記事では、これを使ってメモリリークのトラブルシューティングなどを実施していきたいと思います。
おしまい
コメントを残す