Reading JavaScript errors without guessing

When Output turns red, the runtime is describing a specific failure. Your job is to decode that description, not to start over from a blank file. Most “mysterious” bugs become ordinary once you slow down for thirty seconds.

In Code Arena, treat Output like a terminal. Scroll to the first exception for your run. Ignore noise from previous experiments by clearing mental context — the latest message is the one that matters.

A SyntaxError means the parser could not build a valid program. Missing brackets, mismatched quotes, stray commas in older syntax modes, or incomplete template literals are common causes.

Fix syntax before you debug logic. Logging will not help if the file never became a program. Use the editor’s red markers as a second opinion, then Run again.

ReferenceError usually means you used a variable or function name that does not exist in that scope — often a typo, a forgotten declaration, or a wrong import mental model.

Check spelling first. Then check whether the name is declared above the use. Then check block scope: let and const inside braces are not visible outside.

TypeError often appears when you call something that is not a function (foo is not a function), read a property of null/undefined, or use a method on the wrong type.

Log typeof value and the value itself on the line before the crash. Many TypeErrors collapse immediately once you see undefined where you expected an object.

Stack traces list call frames from the throw site upward (engines vary in formatting, but the top frames are usually closest to the failure). Find the first frame that points at your snippet, not at internals.

If every frame looks unfamiliar, simplify the program until the stack is short. Tiny reproductions teach faster than staring at a deep nest of helpers.

• Identify exception name + message
• Find the first line that is your code
• Reproduce with fewer lines
• Add one log above the failing line
• Change one hypothesis at a time

Forgotten await, unhandled promise rejections, and racing two async calls can look like “sometimes it works.” In a playground, prefer async functions you explicitly call, and log both success and failure paths.

If top-level await misbehaves in the sandbox, wrap your demo in async function main() { ... } and call main().catch(console.error).

Open /javascript and deliberately trigger a ReferenceError, then a TypeError (for example calling a number). Read each Output message out loud. Then fix them. That short drill builds decoding skill faster than rewriting from scratch every time.