そーす

I'm a programmer in Fukuoka. Please contact me saubre.app[at]gmail.com or Twitter DM.

React Native Debuggerがすごすぎて笑ってしまった

github.com

何も言わずに入れて欲しい。

react-native-debuggerはReact Native公式のChrome Debuggerを元に作られたデバッグツールです。

Reduxを利用している場合に力を発揮します。

というかRedux使ってないと旨味無いかもです…

でもRedux入れてるなら絶対使って欲しい。

とりあえずスクリーンショット載せます。

f:id:saburesan:20171027193500p:plain

まだ試した機能は多くないでですが、使った感じで利点をならべるとすると

  • Action, Stateの可視化が素晴らしい
  • 時系列順にAction、Stateのログが取れる
  • 任意のタイミングのActionによるStateのDiffが取れる
  • 任意のタイミングのActionまで状態を戻すことができる
  • Debugger上でActionを発行できる

こんな感じです。

時系列順にAction、Stateのログが取れる。StateのDiffが取れる

f:id:saburesan:20171028104354p:plain

図の「Actionのログ」が発行されたActionを時系列に並べたものです。

「ActionやStateの状態」は「Actionのログ」から選択したActionに関する詳細が見れます。

例えば、図だとSETUP_PAGE_STATE#SET_SETUP_FETCH_STATEを選択して、

右側のパネルのタブでActionを選択すると発行されたActionの詳細を見ることが出来ます。

Stateタブではその左Actionが発行された後のStateの状態が、

DiffタブではActionによって起こったStateのDiffを表示してくれます。

また、それぞれの表示形式は「Tree」「Chart」「Raw」の3パターンから選べ、

デフォルトはTree(図の状態)です。

これをChartに変えると…

f:id:saburesan:20171028104817p:plain

このような表示になります。

Rawはただのテキスト表示です。

任意のタイミングのActionまで状態を戻すことができる。

Actionのログは詳細を見るだけでなく、「Jump」「Skip」という動作が可能です。

Jump

https://gyazo.com/d94ec482b603027187b5632ecc260a00

JumpはStateの状態をそのActionが発行されたタイミングまで戻すことが出来ます。 また、そのタイミングから時系列順にActionを再生することも出来ます。

Skip

Skipは任意のActionの発行を無効にします。

あるアクションがバグを引き起こしているかどうかの検証などに使えそうです。

Debugger上でActionを発行できる

https://gyazo.com/4584122879b6ebf6ad53a478ade7b06d

Debugger上でActionを発行する機能があります。

Debugger上で発行したActionもActionのログに記録されJump, Skipなどの操作が可能です。

ちなみに、ActionはSkipしてからSweepボタンを押すと完全にログから削除できます。

まだまだな所

全然使い物にならねーってほどではないのですが、偶に起きるエラーです。

不安定

ちょくちょく接続エラーになります。その時はアプリ側の再起動が必要です。

Navigation系でページを戻ったりはできない

react-navigationを使っているのですが、Jumpで前のページの状態まで持っていくとエラーになります。

List系の'same key'エラーたまになる

Viewの更新が偶にうまくいかないことがあります。

まとめ

まだまだ試せていない機能が多いのですが、少し使っただけでもデバッグが非常に楽になりました。

f:id:saburesan:20171028121918p:plain

デバッガ上でテストする機能があり、Jest, Mocha, Tape, Avaのテンプレートから選べるというすごく有用そうな機能もあるので試してみたいと思います。