MacのEdgeでFlutterのデバッグをする

 

Flutterのwebをデバッグしたいのだが、使用しているブラウザがEdgeなので、Edgeを使ってFlutterにブレークポイントをはってデバッグをしたい。Edge エンジンはChromeなので、できるはず!?

 

flutter doctor をすると、Chromeの項目だけNGとなっている。

ただ、コメントを読むとCHROME_EXECUTABLEにEdgeを指定すれば動きそうな気がする。

Chrome - develop for the web (Cannot find Chrome executable at /Applications/Google Chrome.app/Contents/MacOS/Google
 Chrome)
 ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.

~/.bash_profile に以下を追記してみる。

export CHROME_EXECUTABLE='/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge'

第一関門のflutter doctorは突破。

Visual Studio Code を立ち上げて、右下の①をクリックすると、プルダウンにさっきまでは表示されていなかったChrome②が現れる。

上記でChromeを選択すると、右下にも反映される

デバッグ開始、行けそう！

ブレークポイントでもとまり、デバッグコンソールなども利用できた。

これは捗りそう!

この本を写経してて、デバッグしたくなったのだが、現実的なアプリ作りをステップバイステップで解説している非常にわかりやすい良書だと思う。