Build with AI: From Zero to Your First App · Module 7: Debugging and testing · Lab
Six-Line Reports for Two Cages
25 min hands-on · Core
Browser only. Turn two cages from the previous lab into full six-line reports with logs and snapshots; no account anywhere.
Three ways to do this lab. A: the browser steps below, the main path, free with no account. B: try the same task with your own AI tool if you have one (its terms and quotas apply). C: work from the provided material and the worked solution below, which teaches the same skill. No path claims you used a live AI tool when you did not.
Objectives
- Write reproduction, verbatim message, last change, snapshot, attempts, question
- Attach exact console text with file and line where one exists
- Make each report answerable in one round
Step 1
Report the vanishing orders
Six lines for bug 1: expected/actual/steps, console state (silent drop, no error, at save()), last change (delete button added), snapshot name, attempts (cleared one entry, still drops), one question (quota check plus message?).
report-template.mdmarkdown REPORT TEMPLATE (six lines) --- 1. Reproduction: expected / actual / steps 2. Message: verbatim with file and line (or 'silent: no error') 3. Last change: ____ 4. Snapshot: ____ 5. Tried: ____ 6. Question: ____Step 2
Report the wrong total
Six lines for bug 3: expected/actual/steps, message (NaN total shown), last change (calculator added), snapshot, attempts (filled value works, empty breaks), question (empty guard placement?).
Step 3
Self-review for answerability
Re-read each report asking 'what would I ask next?' Fill any gap before considering it done.
How to confirm it worked
- Two complete six-line reports
- Verbatim messages or explicit silent states with locations
- Snapshots named in both reports
- Single questions stated in both
Workspace
0/1 checks passing · Coverage only, not a quality score.
Draft kept in this browser.
Hints, in three stages
Stage 1: a nudge
Silent drops are still located: 'at save()' names the address even without red text.
Stage 2: a direction
The last change is the prime suspect. Name it exactly; helpers start there.
Stage 3: almost the answer
Attempts prevent repeated advice. 'Tried X, result Y' in one line each.
Worked solution (open after an honest attempt)
Worked solution. Report 1: reproduction lines, 'silent drop at save(), no console error', last change delete button, snapshot folder-2026-10-06-before-delete, tried clearing one entry, question quota-check wording. Report 2: reproduction lines, 'Total: NaN USD shown', last change calculator, snapshot before-calculator, tried valued qty works, question guard order. Both answerable in one round.