ブレークポイントで止める
先ほど「デバッグモード」での実行をおすすめした理由が、この「ブレークポイント」にあります。
ブレークポイントを設定するとテストの動きを好きな場所で「一時停止」させ、その瞬間の画面の状態や、プログラムの内部をじっくり観察できます。
ブレークポイントの設定方法
設定はとても簡単です。VSCodeで、止めたいコードの行番号の左側をクリックするだけ。すると、
赤い丸印が表示されます。これが「一時停止」の目印です。
止めた後は赤枠左の再生ボタンで一気に進めたり、赤枠右のボタンで1行ずつ進めることができます。
今回覚えておきたいポイント
| ポイント | 説明 |
|---|---|
| 好きな場所で止められる | ブレークポイントを設定した場所で、テストの実行がピタッと一時停止します |
| いくつでも設定可能 | しおりが何枚でも挟めるように、ブレークポイントも好きなだけ設定できます |
| デバッグモード専用 | この「一時停止」機能は、デバッグモードでの実行時のみ有効です。通常モードでは無視されます |
| 停止後も操作できる | 停止した後は、1行ずつ慎重に進めたり(ステップ実行)、次のブレークポイントまで一気に進めたり(継続実行)と、自由に操作できます |
やってみよう
手順動画
手順
tests/document-1/demo-test.spec.tsファイルを開く- 15行目と24行目にブレークポイントを設定する
- デバッグモードで実行する
- 15行目で一時停止したら、1行進めたり、一気に進めたりを試してください
このステップのゴール
ブレークポイントの使い方と1行進める、一気に進めるを体験できたら完了です。