Test and Debug Your App

Web apps break in ways that websites never do.

A website that is built wrong looks wrong. A web app that is built wrong might look fine but calculate incorrectly, fail silently on certain inputs, or break in a specific browser.

This lesson gives you the testing methodology and the exact debugging prompts that get apps fixed fast.

The three layers of testing

Test your app in this order. Do not move to the next layer until the current one passes.

Layer 1: Core function test

Does the app do its one main job correctly?

For a calculator: enter a known set of inputs and verify the output matches your manual calculation. For a quiz: complete it with all "a" answers and all "d" answers and verify the expected scores appear. For a tracker: add an item, refresh the page, and verify it is still there. For a generator: enter sample inputs and verify the output is correctly formatted.

The manual check rule: before testing in the app, calculate the expected answer yourself. Then test the app. If the numbers do not match you have a logic bug.

Layer 2: Edge case test

Edge cases are inputs that are unusual but valid, or invalid inputs that a user might accidentally try.

Test all of these for every app.

Empty submission: click the main button with all fields empty. What happens? It should show an error message, not crash or display "NaN" or "undefined."

Partial submission: fill in some fields but not others and click the button. It should validate each field and show errors only on the empty ones.

Zero values: enter 0 in a numeric field. For a calculator this often causes division by zero or unexpected output. Verify the error handling works correctly.

Negative numbers: enter -1 in a numeric field. Most business calculators should reject this with a clear error message.

Very large numbers: enter 999999999. Does the app still display correctly and does the number format properly?

Text in number fields: type "hello" in a number field. HTML input type number prevents this on most browsers but test it anyway to be sure.

Layer 3: Mobile and display test

Open your app in Chrome. Press Ctrl+Shift+M on Windows or Cmd+Option+M on Mac to open mobile view. Select iPhone SE at 375px. Use the app from start to finish.

Check five things: are all input fields visible and usable with a touch screen, does the results section display without overflow, is the main button easy to tap, does the error message display correctly, and with results showing does everything format correctly without long numbers breaking the layout.

How to read browser console errors

When something goes wrong in a JavaScript app the browser console tells you exactly what broke.

To open the console in Chrome or Edge press F12 and then click the Console tab. In Safari go to Preferences, then Advanced, enable "Show Develop menu in menu bar," then go to Develop and click Show JavaScript Console.

When you see a red error message in the console, copy the full error text including the line number and send Claude this:

My web app is showing this error in the browser console:

[PASTE THE FULL ERROR MESSAGE AND LINE NUMBER]

This error happens when I: [DESCRIBE WHAT YOU DID — filled in the form, clicked the button, etc.]

Here is what I expected to happen: [DESCRIBE THE EXPECTED BEHAVIOUR]

Fix this error in app.js.

Claude reads error messages fluently. The more of the error you paste the faster it fixes the issue.

The most common app bugs

"NaN" or "undefined" appears instead of a number.

This means the calculation received something that is not a number. Usually caused by reading from an empty field or a field that was not converted from text to a number.

The result shows "NaN" instead of a number.

This happens when [DESCRIBE WHEN IT HAPPENS].

Ensure all input values are converted to numbers before calculation.

Use parseFloat() for decimals and parseInt() for whole numbers.

Add validation to confirm all inputs are valid numbers before running any calculation.

Clicking the button does nothing.

The JavaScript event listener is not connecting to the button, or there is an error preventing execution.

Clicking the "[BUTTON NAME]" button does nothing — no result and no error message appears.

Check the browser console for errors. Fix the event listener connection

between the button in index.html and the handler in app.js.

Make sure the button ID in HTML matches exactly what app.js is looking for.

Results from a previous calculation still show after reset.

After clicking Reset the previous results are still visible.

The reset function should: clear all input field values, hide the results section,

and return the page to its initial empty state.

Fix the reset function in app.js.

Layout breaks on mobile.

On mobile at 375px width, [DESCRIBE WHAT IS BROKEN — text overflows, columns stay

side by side, button is too small].

Fix the CSS in style.css for screens below 768px.

[DESCRIBE WHAT IT SHOULD LOOK LIKE ON MOBILE INSTEAD]

The describe-do-not-debug rule

You are not a developer. Do not try to read the JavaScript and figure out what is wrong. Describe what you see and what you expected to see.

Wrong approach: "The event listener on line 47 is not firing because the getElementById is returning null."

Right approach: "When I click the Calculate button nothing happens. No result appears and no error message shows. Here is the console error: [paste error]. Fix this."

Claude reads the code. You describe the behaviour. That division of labour is why this works.

Your action right now

Run all three layers of testing on your app right now.

Run the core function test to confirm the main calculation or quiz produces the correct result. Test the edge cases including empty submission, zero values, and mobile view. Open the console and check for any red errors.

Write down everything that does not work. Fix one thing at a time using specific behaviour-focused prompts before moving to the next issue.