LoginSignup
23

More than 5 years have passed since last update.

posted at

React Native - Debugの方法

ネイティブアプリの開発はXcode等の開発統合環境で普段行われていると思います。これらの環境では、デバッガーが標準で付属しており、ブレークポイントなどを設定して、変数の確認等が用意にできます。React Nativeでの開発では、Chromeのデベロッパーツールを使用してデバックします。

iOSの場合

デバイスのエミュレーター上でCommand+dを押すと、下のようなアクションシートが出てきます。ここで"Debug in Chrome"を押します。

すると、Chromeが立ち上がるので、Command+Option+jを押し、デベロッパーツールを起動します。

そして、Sourceのタブを開きます。

左のペインの"Sources"でブレークポイントをマークしたいファイルをハイライトします。
スクリーンショット 2015-12-03 14.55.43.png

ブレークポイントを設定し、デバイス上でCommand+rを押して、Reloadするとそこで止まります。変数を参照したい場合は、右ペインのWatchで指定できます。

もちろん、console.log()でChromeのコンソールの窓に表示されます。

同様にXcodeのデバックエリアにも表示されます。注意点として、このデバックエリアはオブジェクトのタイプなどがうまく表示されない場合があります。例えば、Parseオブジェクトを取り扱ってるのにJSONフォーマットのように表示されて区別ができません。私はここでハマった記憶があります。できるだけ、Chromeのデベロッパーツールを使いましょう。

スクリーンショット 2015-12-03 15.05.58.png

Androidの場合

Menuを開いた後, "Debug in Chrome"を押します。そうすると、デベロッパーツールが起動します。あとはAndroidも同様です。

コンソールで確認するには、abdコマンドでTailします。

$ adb logcat *:S ReactNative:V ReactNativeJS:V'

Summary

デバッガーがあるのでReact Nativeも安心して開発することができます。JSファイルのReloadの威力は絶大で、Xcodeのbuild+Runに比べて一瞬でスタートできるのも良いです。

これで開発環境が整いました。明日はStyleSheetについてまとめたいと思います。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
23