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

こんにちは。今日は、React Nativeのデバッガーの1つである、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のインストール

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

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

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

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

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

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

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

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

おしまい

この記事を気に入っていただけたらシェアをお願いします!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

ABOUT US
Yuu113
初めまして。ゆうたろうと申します。 兵庫県出身、東京でシステムエンジニアをしております。現在は主にデータ分析、機械学習を活用してビジネスモデリングに取り組んでいます。 日々学んだことや経験したことを整理していきたいと思い、ブログを始めました。旅行、カメラ、IT技術、江戸文化が大好きですので、これらについても記事にしていきたいと思っています。