Stuck? How to Play Through the Errors
In the sandbox, we have a completely different name for errors: we call them landmarks. An error isn’t a penalty card — it’s a GPS ping telling you exactly where the edge of the digital map is.
In a traditional computer science class, when a student runs their code and a red error message pops up, a dark cloud fills the room. The student freezes. They feel like they did something wrong — or worse, that they aren’t “smart enough” to be a programmer.
In the sandbox, that red message means something completely different. It means you found an edge. You pushed far enough to discover a boundary that most people never reach because they never play hard enough to get there.
Before you ask the AI for help, you should learn how to see what your browser is thinking. Every web browser has a hidden dashboard called the Developer Console — a flight data recorder for your web page.
Double-click your equalizer.html file so it opens in Chrome, Edge, or Firefox.
Right-click anywhere on the page and select Inspect or Inspect Element. A panel will slide open on the side or bottom of your screen.
Look at the top of the panel and click the tab labeled Console. If your code is broken, you’ll see a bright red line of text waiting for you.
It might say something like Uncaught ReferenceError: particle is not defined at equalizer.html:42. Don’t try to memorize what that means. You don’t have to. Just copy it.
When things stop working, follow this blueprint with your AI assistant. It works every time.
Don’t guess what went wrong. Don’t try to type out code from memory. Triple-click that red error line in your browser console — this selects the whole line — then copy it.
Paste the exact error text into your AI chat alongside your current file. Precision here saves you fifteen minutes of going in circles.
Feed the AI a prompt that forces it to explain the boundary — not just hand you a quick patch you don’t understand.
“My sandbox application stopped working. My browser console shows this exact error: [paste your red error line here].
Here is my current code: [paste your entire HTML file here]
Can you explain in plain English: 1. What boundary did I accidentally cross to trigger this error? 2. How did the browser’s logic get confused? 3. Give me the corrected version of the full file so I can paste it back into Notepad and keep playing.”
When the AI gives you corrected code, don’t just blindly paste it in. Read its explanation first.
Something incredibly small happened. You accidentally deleted a single comma, capitalised a word that needed to be lowercase, or set a slider minimum to a value that forced a maths calculation to divide by zero. The fix is almost always one character — the understanding is the whole point.
If you ask the AI to add three complicated features at once — bouncing particles, colour-on-click, and a sound effect — and the whole thing breaks, it can be very hard to tell which feature caused the collapse. Sometimes the AI itself gets tangled trying to fix its own code.
When that happens, invoke the Scale Back Rule.
“Let’s pause. Strip away the sound effect and the click features. Let’s go back to the absolute simplest working version of our particle canvas first. Once that is working smoothly, we will add the new features back in one by one.”
By scaling back, you isolate your experiments. You learn exactly which brick changed the system — and that keeps you in complete control of the sandbox.
Everything in this chapter is real debugging practice. These aren’t simplified beginner habits you’ll have to unlearn — they’re exactly how experienced developers work.