Reactotronに詳しめのログを投げる

Reactotronを使うと、React Nativeで作ったアプリのログをリアルタイムかつ簡単に確認することができます。

Reactotronを利用してログを飛ばす場合、例えば、

console.tron.log("hogehoge");

みたいな感じでサクッと送信することも可能なのですが、displayメソッドを利用すれば比較的詳しいめのログを投げることが出来ます。

例えば、

console.tron.display({
  name: 'HOGE FUNCTION',
  preview: 'summary of log',
  value: 'detailed and long message here',
});

みたいな感じにすると、ログの種類や簡潔なメッセージの要約、およびデータの送信が可能になります。 なお、valueの内容を以下のように構造化してやると適切に展開して表示されるので、デバッグ時にデータが見たいと思ったらdisplayを使うのが便利です。

console.tron.display({
  name: 'HOGE FUNCTION',
  preview: 'summary of log',
  value: {
    id: 1,
    name: "Fuga",
    icon: {
      uri: "/path/to/icon",
      size: 1234,
    },
  },
});

さらに公式の例を見てみると、こんな感じに非常に細かく設定したログを出力できるようです。

console.tron.display({
  name: 'Tacos',
  value: {a: 1, b: [1,2,3]},
  preview: 'when you click here, it might surprise you!',
  important: true,
  image: 'http://placekitten.com/g/400/400'
})

参考

• infinitered/reactotron Tips
• Mac OS用Reactのインスペクタアプリ: Reactotron | hacknote