React Native + Expo + Visual Studio Code + Chrome で実機デバッグする

この記事は、「[【連載】初めてのReact Native + Expo開発環境構築入門](https://qiita.com/hitotch/items/5142fff638c7805d84d5)」の子記事です。環境などの条件は、親記事をご覧ください。

---

　[前回](https://qiita.com/hitotch/items/70bbf3e7a7f5f79dc265)すでにちらっと出ていましたが、ExpoとVisual Studio Codeで開発環境を作ると、自然に開発動作環境がモバイル実機になって、デバッガーはChromeになります。
　今回はこの動作のうち基本的な部分を見てみます。

# 構文エラー発生の動作

　まずは単純なエラーがコード上に合った場合どのような動作をするか見ていきます。
　App.jsで以下のようにHello World!を囲むTextタグを間違ってみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315589/d3afc2a9-5497-63a9-37f3-79b8bb1968e3.png)

　すでにLintingで間違いが指摘されていますが、気にしません。保存して実行します。

```
> expo start
```

※もしEdgeが開く場合、既定のブラウザをChromeにしておいたほうが幸せになれるかもしれません。

　今回は構文エラーなので、以下のようにExpo画面とPowerShellにエラーが明示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315589/bee7975c-e331-4d15-0ab3-0d0e1504c6f2.png)

　デバッガーレベルじゃないですね。

# 実行時エラー発生の動作

　今度は構文エラーではなく、実行して初めてわかるエラーを発生させてみます。数値オブジェクトのメンバ関数を実行してみます。

```
export default function App() {
  var a = 1;
  var b = a.undefinedfunction();
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <Text>Hello World!</Text>
    </View>
  );
}
```

　Chromeデバッガーのほうに、問題のソースコード部分と、エラーの内容を明示してくれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315589/479035f0-368b-22d0-b3bb-ee145d348410.png)

　ちゃんと``a``の中身まで見せてくれていますね。
　Visual Studio Codeのヘビーユーザーにとっては、Visual Studio Codeのデバッグコンソールなどが無反応なのが納得いかないかもしれませんが、軽くて優秀なデバッガーが動いているのだから、考えすぎないほうがいいようです。（と、[このあたりの記事を読んで](https://qiita.com/kaba/items/569aafd80889bb5d9328)判断してます。）

# ブレークポイント

　ブレークポイントを使ってみましょう。ソースコードを以下のようにして、変数bに何が代入されようとしているか見てみることにします。 ``var b = a;`` の行で止めたいですね。

```App.js
export default function App() {
  var a = 1;
  var b = a;
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <Text>Hello World!</Text>
    </View>
  );
}
```

　App.jsを修正して保存したら、実行します。

　Chromeでデバッガー (http://localhost:19001/debugger-ui/ のページ) が起動したら、Chromeの開発ツールのSourcesタブで、以下のようにブレークポイントを作れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315589/4a7d4178-bf46-5cc0-9349-846cb1adcb54.png)

　モバイル実機を振ってExpoメニューを出して、[Reload Manifest and JS Bundle]します。
<img width="375" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315589/cc9ccc1b-6e6e-6b29-9c13-e0bce117b25f.png">

　モバイル上でアプリが読み込みなおされて、``var b = a;``の処理を実行する直前で一時停止状態となり、以下のようにデバッガーに表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315589/44edf59d-50bb-0d46-4e2e-db739c26dc85.png)

　ブレークポイントで停止していることが表示されているほか、変数aの内容が自動的に表示されます。
　変数をWatch（右ペインにある）に追加することもできます。このあたりはChromeデバッガーの使い方になってくるので詳しくはググってみてください。

　なお、任意のファイルを開けたいときは、Sourcesタブの左のファイルツリーから選択します。たとえば、さきほどのApp.jsを指定する場合は以下です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315589/f7eb21dc-84a1-dcbf-1a35-edf36eac1b86.png)


# ログ出力

　通常のJSアプリと同様に、console.log()の出力もできます。

```App.js
export default function App() {
  console.log("Test message from Hello World!");
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <Text>Hello World!</Text>
    </View>
  );
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315589/363b40ff-0bb1-d479-8f07-36bc87c2eaec.png)