バグが発生したときはもちろんのこと、開発中に多く利用します。
変数の値の中身を見たり、エラーを捕捉しエラー内容を確認したりします。
Blazor Server で作成された microsoft 公式サンプルコードに手を加えて使用します。
microsoft 公式サンプルコードの作成手順は、
▶
ASP.NET Core Blazor Server のサンプルアプリを立ち上げるまでの導入手順
をご参照ください。
[Counter.razor] ページを以下のコードに置き換えてください。
@page "/counter"
@rendermode InteractiveServer
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
@if (judgeStr == "")
{
<br />
<br />
}
else
{
<p>@judgeStr</p>
<p>@dispStr</p>
}
<button class="btn btn-primary" @onclick="onClickBtn">Click me</button>
@code {
private int currentCount = 0;
private string judgeStr = "";
private string dispStr = "";
/// <summary>
/// クリックでカウントする関数
/// </summary>
private void incrementCount()
{
currentCount++;
}
/// <summary>
/// クリック数で偶数奇数を判断し文字列を表示する関数
/// </summary>
private void numJudge()
{
int remainder = currentCount % 2; // 2 で割った余り
if (remainder == 0)
{
judgeStr = "偶数カウントです";
}
else if (remainder == 1)
{
judgeStr = "奇数カウントです";
}
else
{
judgeStr = "";
}
}
/// <summary>
/// クリック数で文字列を並べて表示する関数
/// </summary>
private void setStr()
{
int remainder = currentCount % 3; // 3 で割った余り
string str = "";
if (remainder == 2)
{
str = "いちご";
}
else if (remainder == 1)
{
str = "メロン";
}
else if (remainder == 0)
{
str = "みかん";
}
dispStr = dispStr + str;
}
/// <summary>
/// Click me ボタンクリック時関数
/// </summary>
private void funcOnClick()
{
incrementCount();
numJudge();
setStr();
}
/// <summary>
/// Click me ボタンクリック時イベント
/// </summary>
/// <param name="args"></param>
/// <returns></returns>
private async Task onClickBtn(EventArgs args)
{
await Task.Run(() => funcOnClick());
}
}
ブレークポイントとは、デバッグを一時停止させるポイントのことです。
左端の余白をクリックすると表示される赤丸がブレークポイントです。
設置したブレークポイントを消すには、赤丸を再度クリックします。
ブレークポイントは、デバッグ開始前でもデバッグ中でもどちらでも設置できます。
2 個ブレークポイントを設置します。
F5 キークリックで次のブレークポイントまでジャンプすること確認します。
上述の
F5、F10、F11 キークリックの事前準備
を完了しておいてください。
F10 キークリックは 1 行ずつ移動します。
F10 キー操作は別名、[ステップオーバー] とも言います。
上述の
F5、F10、F11 キークリックの事前準備
を完了しておいてください。
F11 キークリックは基本的に 1 行ずつ移動しますが、その行が関数の場合は関数の中へジャンプします。
F11 キー操作は別名、[ステップイン] とも言います。
上述の
F5、F10、F11 キークリックの事前準備
を完了しておいてください。
変数の上にマウスカーソルを乗せるだけです。
値の他にも様々な情報を確認できます。