Skip to content

Lesson 03 – Debugging JavaScript with the Browser Console

Modern browsers include powerful developer tools. The console panel reveals JavaScript errors that might not be visible on the page itself. Knowing how to open the console and interpret messages is key for QA testers when diagnosing front‑end issues.

1. Opening the Console

Most browsers share similar shortcuts:

  • Chrome / Edge – Ctrl+Shift+I (or Cmd+Option+I on macOS) to open DevTools, then select the Console tab.
  • Firefox – Ctrl+Shift+K (or Cmd+Option+K on macOS).
  • Safari – Enable the Develop menu in Preferences, then use Cmd+Option+C.

When the console is open, reload the page to capture any errors that occur during startup.

2. Understanding Error Messages

A typical console error includes:

  1. Message – What went wrong (e.g., Uncaught ReferenceError: x is not defined).
  2. File and line number – Where the error originated.
  3. Call stack – The sequence of function calls that led to the error.

Clicking the file link jumps straight to the offending code, making it easy to inspect variables or set breakpoints.

3. Filtering and Logging

Use the console's filters to narrow down warnings, errors, or specific log levels. You can also insert your own console.log() statements to trace values as the script runs. Just remember to remove or disable extra logging before releasing code.

Summary

The browser console surfaces silent JavaScript failures that might not be obvious to users. Checking it should be one of the first steps in any web QA investigation.

Takeaway: If something on the page doesn’t work, open the console. The error details are often waiting there.

Next, you'll explore Test-Driven Development to see how tests guide implementation.

Next up: Lesson 04 – TDD and Unit Testing Basics