メインコンテンツまでスキップ

Flipper

モバイルアプリ開発に使いやすいツールとして、モバイルアプリのデバッグ用プラットフォームであるFlipperを紹介します。

レイアウトやネットワークなどの様々な情報をひとつのツールで検査できます。 また、FlipperはReact Nativeを標準でサポートしているため、セットアップ後すぐにReact Nativeアプリのデバッグを開始できます。

注記

Flipperはバージョン0.62以降のReact Nativeに対応していますが、Expo Goでアプリを起動した場合は使用できません。

インストール​

インストール手順はDesktop App | Flipperを参照してください。 最新以外のバージョンはGitHubからダウンロード可能です。

全てインストールしたあと、Flipperを起動してSetup Doctorがグリーンになっていることを確認してください。

OpenSSLとWatchmanも合わせてインストールする必要があります。

Flipperを利用する​

セットアップが完了したらReact NativeアプリとFlipperを起動してみましょう。

注意

Flipperはデフォルトで8088,8089ポートを使用するため、Metro Bundlerのポート番号を変更している場合被らないようにしてください。 また、Metro Bundlerのポート番号を変更している場合は、起動時にポート番号を指定する必要があります。 Flipperのインストールディレクトリで以下のコマンドを実行し、Flipperを起動してください。

METRO_SERVER_PORT=<Metro Bundlerのポート番号> ./flipper

環境変数としてMETRO_SERVER_PORTを定義すれば起動時に指定する必要はありません。

デフォルトで以下のプラグインを利用できます。

React Native Logs​

React Nativeのコンソールログが表示されます。 log-iosやlog-androidで表示されるものと同じです。

詳細はこちらを参照してください。

React DevTools​

React Developer Toolsと同等の機能を利用できます。

React Developer Toolsについてはこちらを参照してください。

に最終更新