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

この記事は、「【連載】初めてのReact Native + Expo開発環境構築入門」の子記事です。環境などの条件は、親記事をご覧ください。

---

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

構文エラー発生の動作

　まずは単純なエラーがコード上に合った場合どのような動作をするか見ていきます。
　App.jsで以下のようにHello World!を囲むTextタグを間違ってみます。

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

> expo start

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

　今回は構文エラーなので、以下のようにExpo画面とPowerShellにエラーが明示されます。

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

実行時エラー発生の動作

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

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デバッガーのほうに、問題のソースコード部分と、エラーの内容を明示してくれます。

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

ブレークポイント

　ブレークポイントを使ってみましょう。ソースコードを以下のようにして、変数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タブで、以下のようにブレークポイントを作れます。

　モバイル実機を振ってExpoメニューを出して、[Reload Manifest and JS Bundle]します。

　モバイル上でアプリが読み込みなおされて、var b = a;の処理を実行する直前で一時停止状態となり、以下のようにデバッガーに表示されます。

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

　なお、任意のファイルを開けたいときは、Sourcesタブの左のファイルツリーから選択します。たとえば、さきほどのApp.jsを指定する場合は以下です。

ログ出力

　通常の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>
  );
}