JavaScript · Beginner level

Beginner level · Module 5: Interactive Page Project · Lesson 3 of 3

Debugging and Testing in the Browser

Find bugs with DevTools breakpoints and the console, then test the finished page with a written plan.

In this lesson you will

  • Use breakpoints and the Sources panel to debug
  • Test the page with normal, boundary and invalid input

Key concepts

Sources panelbreakpoint and stepconsole errorstest plan

The lesson

Read console errors first: they name the problem and the file and line. Click the link to jump to the code.

For wrong results without errors, set a breakpoint in the Sources panel, trigger the action and step through the code while watching variables. The debugger keyword in your code also pauses there when DevTools is open.

Test with a written plan: normal values, empty fields, zero, very large numbers, letters in the price field and many entries. Record what happened and fix every failure.

Step by step

  1. Introduce a bug and find it with a breakpoint.
  2. Write a test plan with at least eight cases.
  3. Run the plan and record results.
  4. Fix failures and present the page.

Practice activity

Finish, test and present the Market Price Board.

Expected result: All test cases pass and the demonstration shows validation working.

Check your understanding

  1. What should you check first when a page misbehaves?

    Show answer

    The console for error messages.

  2. What does the debugger statement do?

    Show answer

    Pauses execution at that line when DevTools is open.

Taught live by an instructor — online or in person. Free course lessons are for self-study and do not lead to a certificate — see registration options.