Debug, test og usability

Læringsmål

• Bruge DevTools Network til status, headers og CORS-fejl.
• Sætte breakpoints i Razor og services (Blazor Server).
• Skrive en minimal testplan med forventet/faktisk resultat.
• Gennemføre 5-min usability-test med én opgave.

Hvornår stoppe og dokumentere? Når et flow virker manuelt — skriv testplan med screenshots af Network (200/401) før I går videre til næste feature.

Debug-checkliste

1. Reproducer — hvilken route, hvilket klik, hvilken bruger/nøgle?
2. Network — gik request af sted? Status 200/401/404? Response body?
3. Console — JS fejl, WebSocket/SignalR disconnect?
4. Application — sessionStorage: token/nøgle sat?
5. Visual Studio — breakpoint i OnInitializedAsync eller service.
6. Log — midlertidig Console.WriteLine eller ILogger (Server).

Regel: UI-symptom → bevis i Network → derefter ændr kode. Gæt ikke DTO-felter uden at åbne Response.

Network-fanen — trin for trin

Åbn F12 → Network → filtrer Fetch/XHR. Klik «Hent Pokémon» i jeres app:

• Tjek Request URL — korrekt base + path?
• Tjek Request Headers — X-Api-Key eller Authorization med?
• Tjek Response — JSON array eller fejlbesked?
• Rød linje med CORS — origin ikke tilladt på API; fix på server eller proxy via egen backend.

// Midlertidig diagnostic i service
_logger.LogInformation("Henter pokemon limit={Limit}", limit);
var response = await _http.GetAsync(url);
_logger.LogWarning("Status {Code}", response.StatusCode);

Typiske «tom UI»-årsager

• Deserialisering fejler silently — property navne matcher ikke JSON
• 401 — glemt API-nøgle til LoL
• Exception i async metode uden try/catch — tjek Server-log
• Render mode — komponent ikke interaktiv, handler kører ikke

Test-dokumentation (let vægt)

Tabel eller liste pr. feature:

Hvornår screenshot? Ved 401/503 og ved valid submit — censor skal se både UI og Network uden at køre jeres maskine.

Usability-script (5 min)

Instruktion til testperson (uden hjælp):

«Du skal finde Pokémon #25 og gemme den som favorit. Sig højt hvad du forventer sker.»

Observer: hvor mange klik, hvor de leder efter menu, om loading feedback mangler. Notér 3 forbedringspunkter.

Hvorfor det betyder noget: Eksamen og projekt beder om dokumenteret test — Network-fanen beviser om fejl er UI eller API.

Baseret på MAGS Blazor-wiki og Microsoft Learn — Blazor.