はじめに
Expo環境のVSCodeによるデバック方法を投稿します。
使用環境は、MacOSです。
この投稿で扱う内容
Expoプロジェクト作成からVSCodeでデバックするまでを扱います。
1. Expoプロジェクト作成
2. VSCodeデバック設定
3. Expoアプリ実行
4. デバック開始、実行
１．Expoプロジェクト作成
Expoプロジェクトを作成します。
#expo init プロジェクト名
プロジェクト名やテンプレートは自由に指定
２．VSCodeデバック設定
（1）React Native Toolsプラグインをインストール
React Native Toolsをインストールします。
（２）デバック構成を追加
VSCode上部のデバック横の「構成がありません」欄をクリックします。
「構成の追加」を選択すると、選択候補があらわれるため、React Native: Attach to packagerを選択します。
launch.jsonファイルが自動作成されます。
（３）setting.jsonにExpo使用ポートを追記
Expoで使用するポートをVSCode設定ファイルに追記します。
"react-native.packager.port": 19001
メニューのCode>設定をクリックし、設定を表示します。
VSCodeの画面右上の {} をクリックし、設定内容をテキスト表示します。
,"react-native.packager.port": 19001 を追記します。
設定内容の区切り文字のカンマも忘れずに入力します。
3. Expoアプリ実行
ターミナルからExpoアプリを起動します。
iOSの場合
npm run ios
Andoridの場合
npm run android
以降の説明では、iOSの場合を例に記載します。
ExpoのWebコンソールとシミュレーターが起動します。
iOSシミュレーターが起動すると、Expoアプリがシミュレーター上に自動インストールされます。
Expoでアプリを開いてよいか確認ダイアログがでるので、Openをクリックします。
アプリが起動します。
4. デバック開始、実行
VSCode上部のAttach Pacageを選択し、緑ボタンをクリックし、ExpoアプリのプロセスにVSCodeからアタッチします。
VSCode上部にデバック制御ウインドウが表示されます。
シミュレーター上でデバック設定画面を表示し、Debug Remote JSをクリックし、デバックモードを有効にします。
シミュレーター上にデバック設定画面が表示されていない場合、Command＋dで表示します。
Command＋dで、デバック設定画面を閉じて、Expoアプリに戻ります。
ソースにブレークポイントを入れます。
アプリ画面を再読込するため、Command+rで画面を再読込します。
アプリ画面の再読込で、ブレークポイントで停止し、デバックが可能になっています。
VSCODEの下記画面で、ブレークポイントに対して、レジューム実行、ステップ実行、デバック停止が可能です。
デバックがうまくいかない場合
以前のデバック実行がプロセスを掴んでいる可能性やExpoのプロセスが不安定な時があります。この場合、Expo再起動、VSCode再起動、パソコン再起動、シミュレータの初期化や再起動等を試して下さい。これらのどれかでデバックが修復するケースがあります。
