Lesson 8
🎯 Goal
Learn a system for fixing bugs, use it on a page full of them, then turn your own checklist into a real checklist in your app.
Everybody’s code breaks. Good programmers just have a plan.
The Debug Checklist ✅
Go in order.
- Expected vs. happened. What did you want? What actually happened?
- Read the error. Start at the top. Click the blue file link.
- Red squiggles? Hover over them and fix those first.
- What did I change last? Open the Commit window, right-click your file, and choose Show Diff. The bug is usually in what’s green or red.
- Check the usual suspects:
;· matching()and{}· quotes · spelling and CAPITALS · did I forgetsetState? · did I forget the$? - Print it.
print('cycles is $cycles');shows up in the Run panel. - Make it smaller. Comment out code (
Ctrl + /, MacCmd + /) until the bug disappears. - Hot restart. Still weird? Stop the app and run it again.
- 15-minute rule. Stuck for 15 minutes? Ask. Say what you expected, what happened, and what you tried.
Start here
Do The Pull First Rule from Lesson 3.
Task 1: Break it on purpose
The best way to learn errors is to cause them. On your Training Page, do each of these one at a time:
| # | Break it by… | Then |
|---|---|---|
| 1 | Deleting one ; from a line | Find the red squiggle |
| 2 | Spelling setState as setstate | Read the error message |
| 3 | Deleting a ) | Count how many red errors appear |
| 4 | Writing onPressed: myFunction() instead of onPressed: myFunction (use any button with a named function, or make a tiny one) | Read the error message |
For each one: read the error out loud in plain English (to a neighbor or to yourself), then undo it with Ctrl + Z (Mac Cmd + Z). Don’t commit these.
✅ Checkpoint: your page runs again with no red errors.
Task 2: Bug Hunt
On your Training Page, tap Open Bug Hunt (Lesson 8) at the bottom. This page runs, but it has 5 bugs.
The symptoms (what you’ll see):
- Tapping + on Cycles seems to do nothing, until you tap something else
- The text says
Climbed: climbedinstead ofClimbed: trueorfalse - The counters go below zero
- Adding fouls makes the score go up
Goal reached!shows up at 6 cycles instead of 5
Open lib/Training/BugHuntPage.dart. Use the checklist to find the cause of each symptom and fix it.
Need a nudge? (don’t open until you’ve tried)
- Look at the Cycles callback and compare it to the Fouls one right below it. What’s different?
- Look at that line carefully. What’s missing in the text?
- Look at how you stopped negatives in Lesson 7.
- Look at
totalScore(). What should happen tofouls? - Look at the comparison in
goalMessage(). Is it>or>=?
✅ Checkpoint: all 5 symptoms are gone. Test it by tapping things in a different order. A bug you can’t see is one you didn’t test.
Task 3: Make a checklist in your app
Now turn the checklist into real code. On your Training Page, under the heading LESSON 8: CHECKLIST, make a checklist of 5 debug steps (use your own words!).
- Give each step its own
boolvariable, startingfalse. - Show each one with
buildCheckBox, like this:
buildCheckBox('Read the error', readError, (bool value) {
setState(() {
readError = value;
});
}),- Write a function that counts the steps not done yet:
int stepsLeft() {
int left = 0;
if (!readError) {
left++;
}
// one more "if" for each of your other steps
return left;
}(! means NOT. !readError means “readError is false”.)
- Under the checklist, show a
Text:- All steps done! in green when
stepsLeft()is0 - N steps left in orange otherwise
- All steps done! in green when
✅ Checkpoint: you can’t see All steps done! until all 5 boxes are ticked.
Ship it
Click Git → Push… and push your branch.
To complete this lesson
Paste your branch name or link (training-yourname) into this lesson’s tab in your training doc.