そーす

福岡在住のプログラマ。SwiftとかKotlinとかJavascriptとかSketchとか触ってます。

ReactNative製アプリをデバッグするときのTips

実機デバッグはVysorを使おう

chrome.google.com

実機の画面をキャプチャしてPCに転送してくれます。

キャプチャ画面でクリックやスクロール、タイピングもできるので非常に便利です。

ReactNativeのRELOAD機能はR2回押しで実機だと出来ないのでコレを使うと非常に便利です。

実機でデバッグオプションを表示する

デバッグオプションはオプションキーを押すと出てきますが、最近の端末はオプションキーがありません。

なので、adbを使ってオプションキーイベントを送ると表示されます。

 adb shell input keyevent KEYCODE_MENU

【追記】 なお端末をシェイクしても出るようです。

f:id:saburesan:20170228105827p:plain

基本はChromeコンソール、重いようだったらlogcatで

chromeコンソールデバッグはオブジェクトの中身がプルダウンで見ることができるので非常に便利です。 しかしながら非常に重かったり、そのせいで動作がカクつくことがあります。 chromeコンソールデバッグで無くてもよいのであれば、adb logcatを使いましょう

adb logcat | grep React

ReactでgrepするとReactNativeのログのみ見ることが出来ます。

react-native run-XXXがうまくいかないことがある

ReactNativeのプロセスが複数立ち上がっていたりするのでpsコマンドで確認して不要なプロセスはkillしましょう

ps aux | grep React