Linux上のVSCodeでExpo＋React Native Webのデバッグができないときの対応

Linux上のVSCodeでExpo＋React Native Webをデバッグしようとしたところエラーになったので、そのときの対応についての備忘録。

問題

VSCodeのlaunch.jsonにAdd Configuration...からデバッグ構成を追加してデバッグを開始すると

An error occurred while launching the application. プラットフォーム ‘expoweb’ は次のホスト プラットフォームでサポートされていません: linux (error code 709) (error code 303)

のようなエラーでデバッグが開始できない。

原因

React Native Tools拡張の問題？

対応

ブラウザ開発用の起動構成を追加する。

手順

1. launch.jsonファイルを開く
   VSCodeのエディタでプロジェクトの.vscode/launch.jsonファイルを開きます。

2. デバッグ構成を手動で追加する
   .vscode/launch.jsonファイルに以下のようなWebデバッグ構成を追加します。

   {
    "version": "0.2.0",
    "configurations": [
      {
          "name": "Launch Chrome",
          "request": "launch",
          "type": "chrome",
          "url": "http://localhost:8081",
          "webRoot": "${workspaceFolder}"
      }
    ]
   }

   参考:1段目がAdd Configurations…、2段目が追加した設定
   

今回Expoを初めて触ったのでplatform: expowebとの違いが良く分かっていないですが、ひとまずReact Native Webのデバッグはできるようになりました。

参考ウェブサイトなど

• Stack Overflow
  How to debug React Native Web with Expo and VSCode?

以上です。