1. y_koh

    Posted

    y_koh
Changes in title
+Reacti Nativeのデバッグ方法
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,22 @@
+
+[ドキュメント](http://facebook.github.io/react-native/docs/getting-started.html)を探しても見つからず、ググったらStack OverFlowにありました。
+http://stackoverflow.com/questions/29289304/how-do-you-debug-react-native
+
+>Cmd+D from within the Simulator. It'll popup Chrome and from there you can use the Developer Tools.
+
+こんなのどこに書いてあるんでしょうね。
+
+ということでシミュレーター上で```Cmd+D```を叩いてみます。
+![スクリーンショット 2015-03-28 1.32.43.png](https://qiita-image-store.s3.amazonaws.com/0/2569/4ed91321-c0de-90be-817d-bde5679ea6d6.png "スクリーンショット 2015-03-28 1.32.43.png")
+
+すると、chromeでこんな画面が立ち上がります。
+![スクリーンショット 2015-03-28 1.28.52.png](https://qiita-image-store.s3.amazonaws.com/0/2569/5b7878ec-e275-44cc-64c7-be366b5a0a78.png "スクリーンショット 2015-03-28 1.28.52.png")
+
+メッセージの通りChromeのDeveloper Toolsを起動します。
+index.ios.jsというファイルを開くとソースの中身が見れます。
+![スクリーンショット 2015-03-28 1.30.13.png](https://qiita-image-store.s3.amazonaws.com/0/2569/dabd1a89-19e0-4f90-feca-38b077266476.png "スクリーンショット 2015-03-28 1.30.13.png")
+
+任意の場所にブレークポイントを置いてアプリを```Cmd+R```でリロードしてみると、ちゃんとブレークポイントの位置で止まりました。右側に変数の値も出てますね。
+![スクリーンショット 2015-03-28 1.30.59.png](https://qiita-image-store.s3.amazonaws.com/0/2569/d65509ae-0795-15e9-e1bb-0ebea831c7f9.png "スクリーンショット 2015-03-28 1.30.59.png")
+
+アプリのデバッグをChrome Developer Toolsから行うというのがなんともユニークですね。