【React Native開発】React Native Debuggerの導入方法

こんにちは。今日は、React Nativeのデバッガーの１つである、React Native Debuggerの導入方法について整理しておきたいと思います。

前提

Mac + React Native (0.64.x) + Expoで開発をしています。

React Native Debuggerとは？

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

React Native Debuggerを使えるようにするまで

React Native Debuggerのインストール

インストールの方法は２つあります。１つは以下サイトから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アプリが追加されていることが確認できますので、起動します。

Open Config Fileから、設定ファイルを開き、

defaultRNPackagerPortsに、Expoのデフォルトポートである19001（場合によっては19000とかの場合も。Expoでアプリ起動した時のポートに合わせてください）を追加して、ツールを再起動します。

Expoアプリ側でRemote Debugを有効化する

Expoアプリを起動した状態で（iOS Simulator上でも）、Ctrl + Command + Zを押すと、以下のメニューが出てくるので「Debug Remote JS」をクリックします。

すると、Debuggerの方にコンソールログなどが流れてくるようになりました！！

以上、React Native Debuggerを導入して使えるようにするまでの手順でした！

次の記事では、これを使ってメモリリークのトラブルシューティングなどを実施していきたいと思います。

おしまい