Read a Browser Error and Find the Line

Why this matters

The console is where JavaScript confesses. Beginners treat its red text as "broken beyond me" and paste screenshots of symptoms instead; the tool then guesses. Reading three fields (message, file, line) converts every error from a mood into an address, and an address is something you and the tool can walk to together.

Concepts

Opening the console. In any desktop browser: right-click the page, choose Inspect, open the Console tab. Errors appear in red with a message, a file name and a line number; clicking the file reference jumps to the failing line. On phones the console is harder to reach, which is one practical reason course debugging happens on a desktop browser even for phone-layout bugs.

The three fields. Message says what the tool complains about ("Cannot read properties of null" means code touched something that is not there). File says which of your residents holds it (usually app.js). Line says where to look. Read them in reverse order of fear: line first (go there), file second (confirm it is yours), message third (read it literally, one word at a time).

Errors versus warnings. Errors (red) stop the code that follows; warnings (yellow) note something smelly while continuing. Fix errors first, always; warnings wait until the page works. A page with ten warnings and zero errors runs; a page with one error and zero warnings may do nothing at all.

The error report. When you need help (an AI tool, lesson M07L26's bug report), send four lines: what you did, what you expected, the exact message with file and line, and the last change before it broke. "The button broke" sends the helper searching; "Clicked submit on the order form, expected a confirmation, got 'Cannot read properties of null at app.js:42', last change was renaming the form id" sends them to line 42.

Worked example

Real case: order form submit does nothing. Console shows "Cannot read properties of null (reading 'value') at app.js:42". Line 42 reads document.getElementById('phone').value. The form's input is actually id="phone-number" after a rename in lesson 11's cleanup. Diagnosis in one line: code asks for an id the HTML no longer has. Fix: change one string to 'phone-number', reload, submit again. Total time under two minutes, most of it reading rather than typing.

Expected result: any console error converted into file, line and plain-word message plus the one-line hypothesis ("asks for a missing id") before any fix is attempted.

The common wrong move

Two of them. Editing code before reading the error (the fix lands anywhere but the fault), and pasting the whole console without the last-change line (the helper sees symptoms but not history). Read first, include history always.

Lab and next step

Lab A09 gives you three console errors with the lines attached; you will diagnose each to file, line and one-line fix. Next, module M04 builds on all of M03: your first real webpage with AI, structure first and behavior last.