【自由研究②：react native】ExpoでDebug環境を整える

前回に引き続き、夏休み自由研究の第2段です！ 今回は、前回導入したExpoのDebug環境を整えます。 （環境は、macを対象としています）

目次：

---

シミュレータ/エミュレータを使用したDebug

まずは、シミュレータ/エミュレータを使用したDebug環境 を試してみました。

Expoの公式サイトのままやっています。 docs.expo.io

---

Android （Genymotionを使用した場合）

※Genymotionの導入については、別途まとめます。

Either press “Menu” button in Genymotion’s toolbar, or just hit Cmd-m. とあるので、エミュレータ上で、Cmd + mをします。

メニュー表示されるので、「Debug JS Remotely」を選択します。

---

Chromeが起動して以下のメッセージが表示されるので、それに従います。

こんな感じで、developer toolsが使用できるようになり、Debug出来るように なり、ログDebug等が可能になりましたが、JS記述のためやはり、ReactのDebug 環境としてはまだ厳しい感じです。

---

iOS

iOSシミュレータは、試せていませんが以下で可能なようです。

Hit Ctrl-Cmd-Z on a Mac in the emulator to simulate the shake gesture, or press Cmd+D.

---

react-native-debuggerのインストール

react-native-debuggerを使用すると、ReactのDebugが可能なようなので 導入してみます。また、reducerに手を加えることによってReduxのDebugも可能なようです。

github.com

$ brew update && brew cask install react-native-debugger

---

react-native-debugger-open のインストール

ドキュメントを確認すると、react-native-debugger-open も必要なようなので、インストールします。

https://github.com/jhen0409/react-native-debugger/tree/master/npm-package

インストール

$ npm i --save-dev react-native-debugger-open 

package.jsonに追記

"scripts": {
  "postinstall": "rndebugger-open"
}

npm run postinstall を実行し、getDevToolsMiddleware.js をreplaceする

$ npm run postinstall

---

react-native-debuggerの起動

前述しました、Androidエミュレータ場合、Cmd + m後に「Debug JS Remotely」 を選択すると、react-native-debuggerが起動します。

---

まとめ

react-native-debuggerは使用すると、react NativeのDebugが捗りそうです。 ただ、Androidエミュレータは「Genymotion」を使用することが推奨な感じです。 （SDK版では試していませんが、公式ドキュメントに記述がありませんでした） ReduxのDebugをする場合は、redux-devtools-extensionが別途必要そうですが こちらは、次回以降で検証したいと思います。