文系プログラマー「いお」が語る

主にプログラミング関連の記事を書いています。

【FlutterWeb】【AndroidStudio】LAN内の別デバイスでデバッグするための設定と実行方法について

FlutterでWebアプリ開発デバッグ実行時、開発機以外のデバイス(別のPCやタブレットスマホなどの実機)で動かしたいときがあると思います。

そこで今回はLAN内の開発機以外のデバイスデバッグ実行するためのAndroidStudioの設定と実行方法をまとめました。

 

この記事で分かること

✅LAN内の開発機以外の実機デバイスデバッグするためのAndroidStudioの設定と実行方法

 

目次

 

デバッグ設定

開発機のIPアドレスを確認

コマンドプロンプトを開き「ipconfig」コマンドを実行し、IPアドレスを確認する。


AndroidStudioの設定

AndroidStudioエディタ画面上部のバー「実行」をクリックし、「実行構成の編集」をクリック。

 

「Additional run args」に「--web-hostname=192.168.1.5(上で調べたIPアドレス)」を入力。その後「適用」をクリックし「OK」をクリックする。


※ここでポート番号の指定もしたい場合は以下のように入力する。

 

デバッグ実行

後は通常通りChromeやEdgeを選択して実行するだけです。

 

実機デバイスで確認

確認したい実機デバイスで「http://192.168.1.5(指定した開発機のIPアドレス):53535(指定していれば指定したポート番号、指定していなければ実行した際にアドレスバーに表示されるポート番号)」にアクセスする。

 

無事スマホで表示できました!


まとめ

今回はFlutterWebのデバッグ実行を他デバイスで行う方法についてでした。FlutterでWebアプリを開発する際に便利だと思うのでこの機会に理解を深めていきましょう!

以上となります、最後までお読みいただきありがとうございました!