Debugging your Code in Thunkable

As you dive deeper into coding your apps in Thunkable, you’ll inevitably encounter something every single coder experiences: bugs!

Don’t worry, a bug doesn’t mean you’re a bad coder. It just means something in your instructions isn’t working exactly as planned. Today, we’ll learn about Debugging – the essential skill of finding and fixing these bugs.

Lesson Topic: Debugging your Code in Thunkable

Part 1: What is Debugging? (And Why the Funny Name?)

Debugging is simply the process programmers use to:

1. Figure out why their code isn’t working correctly.
2. Fix the errors (the “bugs”) so the code does work.

The name comes from a true story! Back in the 1940s, computing pioneer Admiral Grace Hopper found a real moth stuck in a giant computer, causing it to malfunction. Removing the moth, she said they were “debugging” the system! Now, we use the term for fixing errors in our code.

Part 2: Be Patient, Be Smart (Good Coding Habits to Reduce Bugs)

Debugging can sometimes be frustrating and take time. So, approach it with patience and use these smart habits while coding:

• It’s Okay to Get Stuck: Bugs are normal! Don’t get discouraged. Even professional developers spend a lot of time debugging. Togwaamu nsuubi! (Don’t lose hope!)
• Code Small, Test Often: This is maybe the MOST important tip!
  • Don’t try to code your entire app before testing anything.
  • Do code small pieces of functionality. For example:
    1. Code what happens when the first button is clicked.
    2. Test it immediately using Live Test on your phone. Does it work? Great!
    3. Now code the second button.
    4. Test that.
    5. Continue this cycle: Code a little, test a little.
  • Why? If something breaks, you know the error is likely in the small bit of code you just added, making it much easier to find!
• Save Your Progress (Version Control): Imagine you have a part of your app working perfectly. You add new blocks, and suddenly nothing works, and you can’t figure out how to undo it! Disaster!
  • Solution: Regularly save working versions of your project. In Thunkable:
    1. Click the three dots (…) in the top right of your project screen.
    2. Select “Duplicate Project”.
    3. Rename the copies clearly (e.g., “MyAwesomeApp_v1_LoginWorking”, “MyAwesomeApp_v2_ProfileAdded”).
  • If you mess up badly later, you can always go back to the last good version!
  • Note: The free Thunkable plan has a 10-project limit. If you reach it, delete the oldest backup versions before saving a new one.
• Keep Your Workspace Tidy (Collapse & Disable Blocks):
  • Collapse Blocks: As your code grows, the Blocks screen gets crowded. Right-click on a big chunk of blocks (like a function or a complex event handler) and choose “Collapse Block”. It shrinks down but still works, making your screen cleaner. Right-click and “Expand Block” to see it again.
  • Disable Blocks: Want to temporarily stop some code from running without deleting it? Right-click and choose “Disable Block”. It turns greyed out and won’t execute. You can also just drag blocks out of their event handler – they’ll be greyed out and disabled. This is useful for testing parts of your app in isolation. Re-enable them when needed.
• Explain Yourself (Comments): Add notes directly to your code!
  • Right-click on a block or group of blocks and select “Add Comment”. A little blue question mark appears. Click it to type your explanation (e.g., “This function calculates the total price including VAT”).
  • Why? Comments help:

• Your teammates understand your code.
• You understand your own code when you come back to it weeks later!
• Judges understand your logic during evaluation.

Part 3: Finding the Bug (Debugging Techniques in Thunkable)

Okay, so despite your best efforts, something’s not working. How do you find the bug?

• Shine a Light (Use Alerts & Labels for Testing): Sometimes you need to see what’s happening inside your code while it runs.
  • Alerts: Add an Alert component (click the ‘+’ next to ‘Alerts’ in the Blocks palette if needed). In your code blocks, use the Alert’s call Show block. Set the message to display the value of a variable, or just a simple message like “Reached this point!”. This pop-up helps you track the flow or check values.
  • Labels: Add a temporary Label component in the Designer. In your Blocks, use set MyDebugLabel’s Text to… to display the value of a variable, the result of a calculation, or the property of a component (like Sprite’s X position). You can see the value update live on your test screen.
  • Remember: Delete or hide these temporary Alerts and Labels once you’ve fixed the bug!
• Start Simple (Use Test Data): If your app uses a lot of data (e.g., from a Google Sheet or Airtable), test the logic with a tiny amount first.
  • Example: If your app displays information about 100 local businesses, create a test sheet with only 2-3 businesses first. Make sure your app correctly displays info for those 2-3 before connecting it to the full list. This makes it easier to spot data-related errors.
• See it Change (Live Test Property Changes): Thunkable’s Live Test is powerful! If something looks wrong on the screen (like a button in the wrong place, or text the wrong color):
  • While the app is running on your phone via Live Test…
  • Go back to the Thunkable Designer tab on your computer.
  • Select the component (e.g., the button).
  • Change one of its properties in the properties panel (e.g., change its X position, Height, or BackgroundColor).
  • Look at your phone – you should see the change happen instantly! This helps you understand coordinates and visual properties quickly.

Part 4: Bug Hunt! (Activity 1 – Fix the Timer App – 20 mins)

Time to practice being a bug detective!

Your Mission: Find and fix the bugs in the provided Timer App project.

Steps:

1. Remix the Project: Open the link from the lesson and click “remix” to get your own copy.
2. Live Test: Run the app on your phone.
3. Find the Bugs:
   • What happens if you press the “Start” button without typing anything into the seconds text box? (Hint: Crash?)
   • What happens if you enter 0 or a negative number (like -5) and press “Start”? (Hint: Weird behavior or crash?)
4. Fix the Bugs:
   • Go to the Blocks editor. Find the when StartButton Click event.
   • Use Conditional Blocks (if/else if/else)! Before the timer logic runs, you need to check the input:
     • Add an if block to check if TextInput’s Text is empty. If it is, show an Alert telling the user to enter a number.
     • Add an else if block to check if the number from TextInput’s Text is less than or equal to 0. If it is, show an Alert telling the user to enter a positive number.
     • Put the existing timer starting logic inside the final else block (meaning the input is valid).

Part 5: Explain Your Code (Activity 2 – Add a Comment – 10 mins)

Practice making your code understandable!

Your Mission: Add at least one useful comment to a Thunkable project.

Task:

1. Open your main Technovation project (or the fixed Timer App if you haven’t started your main one).
2. Find a group of blocks that performs a specific action, especially one that might look complicated later.
3. Right-click on the main block of that group (like the when Button Click block or a function block) and select “Add Comment”.
4. Write a short, clear explanation of what that section of code does.

Part 6: Remember This! (Final Thoughts & Encouragement)

Debugging is a core part of coding. It’s not a sign of failure; it’s a sign that you’re building something!

• Bugs are normal. Expect them!
• Code in small chunks and test often.
• Use version control (Duplicate Project).
• Use comments to explain your logic.
• Use Alerts, Labels, and Live Testing to investigate problems.
• Take breaks! If you’re stuck and getting frustrated, step away for a few minutes. Walk around, get some water. A fresh perspective often helps you spot the error. Kawumuleko! (Take a break!)
• Celebrate every small success when you fix a bug or get a feature working!

Part 7: Quick Review (Key Terms)

• Debugging: The process of finding and fixing errors (“bugs”) in your code.
• Version Control: Saving working copies of your project as you go (e.g., using “Duplicate Project”).
• Test data: Using a small, simple set of data for initial testing.
• Comments: Notes added to code to explain what it does.

Part 8: More Help

Need more debugging tips for Thunkable?

• Check out the Thunkable Community forum (other users might have faced similar issues).
• Look at the Debugging in Thunkable resource linked in the lesson.

Conclusion

Mwebale kusoma! (Thank you for paying attention!) You now have a solid set of strategies for tackling bugs in Thunkable. Learning to debug effectively will make you a more confident and efficient coder. Remember to be patient with yourself and the process. Happy bug hunting! Mweraba! (Goodbye!)