How to debug JavaScript in the browser console

The browser console is the quickest place to see JavaScript exceptions, logged values, and test expressions from the page that is currently failing. It is especially useful when a click handler, form submission, or small script behaves differently in the browser than it does in source review.

Console debugging is clearer when it stays tied to one reproducible action. Keep the affected tab open, reproduce the failure once, and use the newest error, stack frame, and page variables before adding broad logging or changing unrelated code.

A cart total function that receives JSON text instead of an array keeps the investigation small without requiring a framework. The same approach applies to form handlers, fetch callbacks, and component code: identify the thrown error, inspect the live value, test the smallest corrected expression, and reload the page to prove the original action no longer fails.

Steps to debug JavaScript in the browser console:

Open the affected page in a desktop browser.

Keep the page on the same route, user state, and input values that trigger the failure.
Open Developer Tools and select the Console panel.

Chrome and Edge use Command+Option+J on macOS or Ctrl+Shift+J on Windows and Linux for the Console shortcut. Firefox and Safari expose the same debugging surface with slightly different labels.
Enable Preserve log when the failure happens during a reload, redirect, or navigation.

In Chrome DevTools, open Console settings and tick Preserve log so messages remain visible after the page changes.
Reproduce the failing browser action and read the newest red error.
```
> totalCart()
Uncaught TypeError: cartItems.reduce is not a function
```
The error name points to the operation that failed. Here, reduce() exists on arrays, so the next check should confirm what cartItems actually contains.
Check the type of the suspect value.
```
> typeof cartItems
"string"
```
Inspect the raw value before changing the source.
```
> cartItems
"[{\"name\":\"Desk lamp\",\"price\":20,\"quantity\":2},{\"name\":\"USB cable\",\"price\":4,\"quantity\":1}]"
```
Use read-only expressions first. Console expressions run in the live page, so assignments, DOM edits, and network calls can change the page state while debugging.
Test the smallest corrected expression in the Console.
```
> JSON.parse(cartItems).reduce((sum, item) => sum + item.price * item.quantity, 0)
44
```
The successful result proves the failure came from using a JSON string as an array, not from reduce() itself.

Patch the source code so the function normalizes the value before reducing it.

function totalCart() {
  const items = Array.isArray(cartItems) ? cartItems : JSON.parse(cartItems);
  return items.reduce((sum, item) => sum + item.price * item.quantity, 0);
}

Reload the page so the browser uses the updated script.

If the page is bundled, rebuild or refresh the development server before reloading the tab.
Run the original failing function again.
```
> totalCart()
44
```
Repeat the original browser action and confirm the Console does not add the same red error.

If a new error appears, debug that message separately instead of assuming it has the same cause.