Observe a decision while it happens
The console shows results after execution. A debugger can pause before a statement and let you inspect the current values. Use the desktop browser developer tools already used in module 1. The code editor/debugger may be called Sources or Debugger depending on the browser.
function calculateQuote(unitPrice, quantity, packingCharge) {
const subtotal = unitPrice * quantity;
debugger;
const total = subtotal + packingCharge;
return total;
}
console.assert(calculateQuote(20, 2, 5) === 45);
Type the function into the console and call it with developer tools open. If debugger pauses are enabled, the debugger statement pauses execution before total is calculated. Inspect unitPrice, quantity, packingCharge and subtotal. Your paper prediction for subtotal should be 40.
Use the controls intentionally
A breakpoint pauses at a chosen source line. Step over executes the next statement without stepping through every called function. Step into follows a call. Resume continues execution until another pause or completion. Inspect the scope panel for local values and the call stack for how you reached this function.
If the browser does not pause, check whether breakpoints are disabled. You can still trace the same program with console logging. Tool layouts differ; the purpose is observing state, not memorizing an icon position.
Guided task
Step over the addition. Inspect total, then resume. Predict the function's return before observing it. Remove the debugger statement after the investigation so it does not interrupt normal use.
Independent exercise
Change packingCharge to 0, then quantity to 3. Pause at the same location each time and compare predicted subtotal and total. Which value should not depend on packing?
Correction
With quantity 2 and packing 0, subtotal and total are 40. With quantity 3 and packing 0, both are 60. Subtotal depends only on unit price and quantity. A debugger observation confirms what happened for these inputs; it does not prove the business formula for all inputs.
Review
Use inspection to test a hypothesis. Random stepping without an expected state is slower and less informative than a small, deliberate trace.