ReactNativeのデバッグ方法

Atom上でデバッグできるのかなと思っていたけどできなかったので忘れないようにメモ

詳しくは公式ページに書いてあった。

facebook.github.io

デバッグ方法

起動中のエミュレータ上で、以下のキーを入力する

• iOSの場合 : Command + D
• Androidの場合 : Command + M

そうすると以下のダイアログが出て来るので、Debug JS Remotelyを選択。

ブラウザが立ち上がって、デバッグ用のダミーページが表示されるので、デベロッパーツールを開く。
Chromeの場合、Command + Option + J。

そうするとソースコードやConsoleなどが確認できるようになるので、デバッグしたい場合はでデベロッパーツール上のJSコードにブレークポイントを置いて、実際に動かしてやるとブレクポイントで止まるようになり、変数に入っている値も参照できる。

一度デバッグモードに切り替えると、次回 react-native run-iosしたときも自動でデバッガが起動する。
キャンセルしたい場合、再度Command + D (AndroidはCommand + M)で開発者メニューを表示してStop Remote JS Debuggingを選択してやればOK。

Atom上ではなくてChrome上でデバッグするのは斬新だけど、これでデバッグしながらの開発ができるようになった。

console.logの表示

デバッグを起動するまでもないけど、console.logだけ表示させておきたいという場合 既にアプリケーションが起動している状態で、ターミナルで以下のコマンドを実行する。

# iOSの場合
$ react-native log-ios

# Androidの場合
$ react-native log-android

そうすると、console.logで出力している内容が出力されるようになる
以下はjsonデータを単純に出力している。

Jan 22 00:14:46 USER_NAME AwesomeProject[46007] <Notice>: { title: 'Star Wars', releaseYear: '1977' }
Jan 22 00:14:46 USER_NAME AwesomeProject[46007] <Notice>: { title: 'Back to the Future', releaseYear: '1985' }
Jan 22 00:14:46 USER_NAME AwesomeProject[46007] <Notice>: { title: 'The Matrix', releaseYear: '1999' }
Jan 22 00:14:46 USER_NAME AwesomeProject[46007] <Notice>: { title: 'Inception', releaseYear: '2010' }
Jan 22 00:14:46 USER_NAME AwesomeProject[46007] <Notice>: { title: 'Interstellar', releaseYear: '2014' }