VSCodeにてFlutter Webがうまく実行できない時の対処
先日適当に作ったFlutterのサンプルプロジェクトを今日開くとウェブでの実行ができなくなっていた。
ステータスバーでデバイスをChromeにしてメニューから「実行 > デバッグの開始」をすると http://localhost:8080 が開いて接続できないという状況。
対処法としては、いつの間にか勝手に作られていたlaunch.jsonを削除するか書き直せばOK。
いつの間にか勝手に作られていたlaunch.json
そもそも接続先8080だったっけ？
と思って色々調べていると、作成したばかりのFlutterプロジェクトには存在しなかった .vscode/launch.json がいつの間にかできていた。このlaunch.jsonでは動かない。
{
// IntelliSense を使用して利用可能な属性を学べます。
// 既存の属性の説明をホバーして表示します。
// 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}いつのタイミングで出来たのかまったく分からなかったのだが、まっさらなFlutterプロジェクトを何個か作っていろいろと試していたら再現できた。
- まっさらなFlutterプロジェクトを作って開く
- 実行 > デバッグの開始
- 実行 > デバッグの停止
- プロジェクトを閉じる
- 再度プロジェクトを開く
- 実行 > デバッグの開始
すると以下のような環境の選択肢が出てくるのだが。
ここで「Chrome」を選択してしまうと上記内容のlounch.jsonが作られる。
「Dart & Flutter」が正解。
プロジェクトを作ったばかりの時はこの選択肢が出てくることはなくて問題なく動くというのがなかなかいやらしい。
launch.jsonの内容を削除するか空にする
作られてしまったlaunch.jsonを削除するか、内容を以下のように空にするとChromeで一応実行できるようになる。
{
"version": "0.2.0",
"configurations": []
}ただしこれだとプロジェクトを開いて最初の実行の際に都度環境の選択が出てきて「Dart & Flutter」をポチっとしなければならないので地味に不便。
また選択を間違えるとVSCodeを立ち上げ直さないといけない点が非常に残念。
ちなみにこの状態で間違えて「Chrome」を選んでもlaunch.jsonができることはないが、.vscodeディレクトリも削除した後にまた「Chrome」を選んでしまうと再び http://localhost:8080 を使おうとするlaunch.jsonができる。
またくだらぬ挙動を深追いしてしまった。
Dart & Flutterで実行するようにlaunch.jsonを書き直す
面倒なくFlutterで実行できるようにlaunch.jsonはきちんと準備するのが良い。
{
"version": "0.2.0",
"configurations": [
{
"name": "Flutter",
"type": "dart",
"request": "launch",
"flutterMode": "debug",
"program": "lib/main.dart"
}
]
}programを指定しておくとmain.dart以外を修正しているときに実行してもmain.dartを実行してくれるので便利。
というか指定しないとエディタでアクティブなタブのコードを実行しようとするため、期待通りの実行ができなくて不便。
flatterModeはdebug、production、profileのいずれかを指定できるがargsで指定するのとどっちがいいのか不明。
nameはラベルなので適宜区別しやすい名前にできる。
configrationsを複数定義した場合はステータスバーから切り替えることが可能なので、その時に分かりやすい名前にするのが良い。
本格開発でdevelopmentとproductionで環境を分ける場合はいずれにしろlaunch.jsonを書かないといけないようなのでめんどくさがらず書いておくのが良いでしょう。
