React Nativeのデバッグ環境「React Native Debugger」をセットアップする

React Native 作ったアプリの HTTP リクエスト・レスポンス内容を確認したいのですが、 確認の方法がわからなかったので調べました。

Expo のドキュメントを確認したところ、React Native Debugger を使用すると以下のデバッグを行えるようです。

1. React Dev Tools を使用したデバッグ
2. Redux Dev TOols を使用したデバッグ
3. ネットワークトラフィックの検査

参考にしたドキュメント

Debugging - Expo Documentation

Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.

https://docs.expo.io/workflow/debugging/

前提

• expo-cliはインストール済み。バージョンは4.7.3
• iOS アプリExpo Goで動作確認。バージョンは2.21.3

‎Expo Go

‎Start building projects using web technologies with just your iOS device and your computer. Expo is a developer tool for creating experiences with interactive gestures and graphics using JavaScript and React. Note: some programming experience is recommended. Technical specs: this version of Expo us…

https://apps.apple.com/jp/app/expo-go/id982107779

React Native Debugger のインストール

まずは React Native Debugger をインストールします。
MacOS の場合は、次のコマンドで実行できます。

$ brew install --cask react-native-debugger

その他の OS 場合、リリースノートからダウンロードできます。

React Native Debugger の起動

ポート設定

React Native Debugger を起動すると、デフォルトのポートが8081になっています。 Expo でアプリを起動する場合、ポート番号が19000だと思いますのでこの番号に設定を変更します。 ポート番号は SDK バージョンによって異なるようなので、ご自身の環境に合わせてください。

ポート設定変更ウィンドウの表示方法は、Mac の場合はCommand+T、Windows の場合はCtrl+Tです。

デバッグ開始

yarn start or expo startで開発サーバーを立ち上げます。
続けて、Expo Go アプリを起動＆シェイクしてDebug remote JSを選択すればデバッグが開始されます。

ネットワークトラフィックを検査する場合は、React Native Debugger 上で右クリックし、表示されたメニューからEnable Network Inspectを選択します。