Flutter初心者VScodeのブレイクポイントが便利すぎて感動した話

開発中、謎のエラーに悩まされる初心者Flutterエンジニアさん集合〜！！
今回はVScodeをなんとなく使用している私のような人間に向けた記事です。
当たり前すぎてなのか？誰からも教わることのなかったブレイクポイントの使い方を最近覚えたんですが、まじで便利すぎて感動しました…。

ブレイクポイントというのは、画面の左端に出てくる赤丸のことです。

気がついたら押し間違いで表示されてる赤丸の正体はブレイクポイントでした

VSCodeにはデバッグ機能が組み込まれており、ブレイクポイントを使用してコードの特定の位置でプログラムの実行を一時停止させることができます。
エラーの原因はこの辺かな〜？というところでブレイクポイントを利用し、バグの原因を特定したり、変数の値を確認したりすることができます！

VSCodeのブレイクポイントの使い方

1. ブレイクポイントの設定
   ソースコードの左側の余白をクリックすると、赤丸が表示され、その位置にブレイクポイントが設定されます。
   ブレイクポイントを削除したいときは再度ブレイクポイントをクリックするか、右クリックして「ブレイクポイントを削除」を選択すればOK。

2. デバッグの開始
   実行とデバッグの再生ボタンを押してデバッグを開始します。

3. ブレイクポイントでの一時停止
   プログラムがブレイクポイントに到達すると、その位置で自動的に一時停止します。この状態で、ツールバーに表示される操作ボタンを使用してコードの実行をステップバイステップで進めることができます。
   ツールバーのボタン

4. 変数の確認
   ブレイクポイントでプログラムが一時停止したとき、左側のサイドバーの「変数」セクションで、現在のスコープ内の変数の値を確認することができます。
   変数の確認

ブレイクポイントの機能

ツールバーにある機能はこんな感じです。

ステップオーバー

関数やメソッドの内部をステップバイステップでいちいちデバッグしない機能
ブレイクポイントで停止中に「ステップオーバー」ボタンをクリックすると、現在の行の実行が完了した後に次の行に移動します。現在の行に関数やメソッドの呼び出しが含まれている場合、その関数やメソッドの中身を飛ばして実行します

ステップイン

関数やメソッドの内部をステップバイステップでデバッグする機能
ブレイクポイントで停止中に「ステップイン」ボタンをクリックすると、現在の行に関数やメソッド呼び出しが含まれている場合、その関数やメソッドの中に入って実行します。

ステップアウト

現在の関数やメソッドの実行を完了し、呼び出し元に戻る機能
ブレイクポイントで停止中に「ステップアウト」ボタンをクリックすると、現在の関数の残りの部分を全て実行した後、その関数を呼び出した位置の次の行に移動します。
現在の関数の残りの部分は問題ない場合、関数の残りの部分をスキップして呼び出し元に戻れます。

続行

プログラムの実行を現在のブレイクポイントから再開する機能
ブレイクポイントで停止中に「続行」ボタンをクリックすると、次のブレイクポイントに到達するか、プログラムが終了するまで続行されます。

---

自分はこの機能を覚えてからエラーの解消が格段に速くなりました！
今まではエラーの箇所がわからない時、コンソールに一つ一つの挙動を出力しまくっていたので…
なんとなく使用していたVScodeですが、まだまだ初心者の知らない便利機能がたくさんあるみたいなので少しづつ覚えて使いこなしていきたいです。