⚡ Lesson 30 of 30
Debugging & Profiling
Use VS 2026's debugger, breakpoints, console techniques, and performance tools to find and fix bugs.
console Methods
Go beyond console.log:
console.log("Basic log");
console.info("ℹ Info");
console.warn("⚠ Warning");
console.error("✗ Error");
console.table([{a:1,b:2},{a:3,b:4}]); // table view
console.group("Group name");
console.log("nested log");
console.groupEnd();
console.time("fetch"); // start timer
// ... work ...
console.timeEnd("fetch"); // "fetch: 12.345ms"Breakpoints in VS 2026
Click in the gutter left of a line number to set a breakpoint. When the code reaches that line, execution pauses. You can then inspect variables in the Locals panel, hover over expressions, and step through code line by line:
// Set a breakpoint on the line below
function calculateTotal(items) {
let total = 0; // ← breakpoint here
for (const item of items) {
total += item.price * item.quantity;
}
return total;
}Conditional Breakpoints
Right-click a breakpoint in VS 2026 → Edit Breakpoint → add a condition. The debugger only pauses when the condition is true:
// Condition: item.price > 100
// Only pauses on expensive items
for (const item of items) {
total += item.price; // conditional breakpoint here
}The Call Stack & Watch Window
When paused at a breakpoint, the Call Stack panel shows how execution reached that point. The Watch window lets you evaluate arbitrary expressions as you step.
function c() { throw new Error("Oops"); } // error here
function b() { c(); }
function a() { b(); }
// Call stack will show: c > b > a > (anonymous)
try { a(); } catch (e) { console.error(e.stack); }Performance Profiling
Use the performance API to measure code speed, or use VS 2026's built-in profiler (Debug → Start Profiling):
performance.mark("start");
// Code to measure
const data = Array.from({length:1e6}, (_,i)=>i);
const sum = data.reduce((a,b)=>a+b,0);
performance.mark("end");
performance.measure("reduce-sum","start","end");
const [entry] = performance.getEntriesByName("reduce-sum");
console.log(`${entry.duration.toFixed(2)}ms`);