Exercise 4: Debugging Detective Challenge (Blazor WebAssembly)

Goal: Practice using Visual Studio's debugger to find and fix a hidden mistake (a "bug") in your code. This is a crucial skill for any developer!

Concepts You'll See:

• Setting "breakpoints" to pause your code.
• "Stepping through" your code line by line.
• "Inspecting" (looking at) the values of your C# variables while the code is running.

Step-by-Step Instructions:

1. Open the Counter.razor File and Introduce the "Bug":

• Open your MyFirstCounterApp project in Visual Studio.
• Open Pages/Counter.razor.
• In the @code block, find the IncrementCount() method.
• Deliberately add this incorrect line (this is our "bug" to find!):

private void IncrementCount()
{
    currentCount = 100; // THIS IS OUR FAKE BUG! It resets the count to 100!
    currentCount++;
}

• Save the file: Press Ctrl + S.

2. Run in Debug Mode (Start Your Investigation):

• Press F5 (the green "Play" button) to run your application.
• Navigate to the "Counter" page.
• Click the "Make it go up!" button a few times.

Observation: What happens? The number jumps to 101, not what you expect! This is our "bug."

3. Set a Breakpoint (Mark Your Evidence):

• Go back to Visual Studio (your app is still running in the browser).
• In Counter.razor, click directly in the gray margin to the left of the line currentCount = 100;.
• A red circle will appear on that line. This is a breakpoint. It tells Visual Studio: "Pause the code execution here if it reaches this line."

4. Trigger the Breakpoint (Follow the Clues):

• Go back to your web browser where your Blazor app is running.
• Click the "Make it go up!" button again.

Observation: Visual Studio will immediately pop to the front, and the currentCount = 100; line will be highlighted in yellow. This means your code has paused exactly where you set the breakpoint!

5. Inspect Variables (Examine the Evidence):

While the code is paused (yellow highlight):

• Hover your mouse over the variable currentCount on that line. A small pop-up window will show its current value. What do you see? (It should be some small number, like 0 or 1, before the bug line executes).
• Look at the "Locals" window (usually at the bottom of Visual Studio). This window shows the values of all variables that are currently in scope. Find currentCount there.

6. Step Through the Code (Reconstruct the Crime):

• Press F10 on your keyboard (this is "Step Over").

Observation: The yellow highlight will move to the next line (currentCount++;).

• Now, hover over currentCount again or check the "Locals" window. What is its value now? (It should have jumped to 100 because the previous line just executed!)
• Press F10 again.

Observation: The yellow highlight will disappear, and currentCount will be 101. The code has finished executing this method.

You can now see exactly when and how the currentCount was unexpectedly reset. This is the power of debugging!

7. Fix the Bug:

• Now that you've found the culprit, stop debugging. In Visual Studio, click the red square "Stop Debugging" button or press Shift + F5.
• Remove the problematic line from Counter.razor:

currentCount = 100; // Delete this line!

• Save the file: Press Ctrl + S.

8. Verify the Fix:

• Press F5 again to run the application.
• Navigate to the "Counter" page.
• Click the "Make it go up!" button multiple times.

Observation: The number should now increment by 5 (or 1 if you reverted that change) correctly, starting from 0, without jumping to 101.

When you're done, close the browser and stop debugging (Shift+F5).