ReactNativeアプリケーションのデバッグメニューとデバッグ方法を解説する

先日、ReactNativeの「react-native init」によるインストール方法を解説しました。

www.konosumi.net

本日の記事は、ReactNativeのデバッグ方法についてです。

デバッグの基本

以下の方法で、起動中のアプリに対してデバッグメニューを表示することができます。

実機(Android, iOS共に)：端末をシェイクする(振る)
GenyMotion(Androidエミュレータ)： command + M
iOSシミュレータ： command + D

なお、他にも「react-native log-android」で出力されているログを追うことも出来ます。「react-native log-ios」もあるのですが、私の環境ではうまく動きませんでした。

f:id:konosumi:20180711001104p:plain

Realod

「Realod」は、アプリケーションを再起動します。「command + R」によるショートカットも可能です。主にReactNativeプロジェクト内の、JavaScriptコードの変更を適用するために使用します。

注意してほしいのは、あくまで変更が反映されるのはJSレベルでの変更だけです。JAVAやObjective-Cのコードの変更までは反映されないため、「react-native run-android / run-ios」をやり直す必要があります。

Debug JS Remotely

「Debug JS Remotely」は、ブラウザのデベロッパーツールを利用してアプリケーションをデバッグするために使用します。

f:id:konosumi:20180711003111p:plain

見てもらうと分かりますが、起動すると「http://localhost:8081/debugger-ui/」が開かれます。この8081は、ローカルホスト上に起動している「Metro Bundler」のポートです。

f:id:konosumi:20180711003448p:plain

私は、主にデベロッパーツールのコンソールタブで、ログを閲覧したい時に使用します。

Enable Live Reload

Live Reloadを有効にすると、アプリケーションがJSコードの変更を検知すると、自動で再起動されるようになります。

毎回「Realod」を押す手間が省けるのは便利ですが、反面、わずか一行の修正でもアプリケーションが勝手に再起動されるようになります。一長一短の機能です。

Enable Hot Reload

Hot Reloadは、アプリの状態を維持した上でJSコードの変更が反映されます。UI関連の開発をするときには、とても重宝する機能ではないかと思います。

FlexCSSを変更すれば、それに伴って見た目だけが再構成されます。いちいち初期画面に戻されることもありません。

Toggle Inspector

「Toggle Inspector」は、UIパーツの調査に最適なツールです。ボタンやテキストなどの、マージンやパディング、要素そのもののサイズなどを調査することができます。

f:id:konosumi:20180711004310p:plain

Start Systrace(iOSのみ)

プロファイリングを行なうことができます。ちなみに、私はまだ使用したことがありません。

iOS版のアプリケーション用に、プロセスに関するプロファイリングを行うためのツールのようです。

Used for starting Android marker based profiling tool.

引用：https://www.tutorialspoint.com/react_native/react_native_debugging.htm

なお、予め以下のようにコード内に埋め込んでおく必要があります。

// SEE: https://facebook.github.io/react-native/docs/performance.html
// SEE: https://facebook.github.io/react-native/docs/systrace.html
require.Systrace.beginEvent = (message) => {
  if(message.includes(problematicModule)) {
    throw new Error();
  }
}