Developer Tools in Google Chrome

Chrome DevTools is your best friend when writing JavaScript. It lets you inspect, debug, and experiment in real-time.

Opening DevTools

• F12 — toggle DevTools
• Ctrl + Shift + I (Windows) or Cmd + Option + I (Mac)
• Right-click any element → Inspect

The Console Tab

The Console is where you'll spend most of your time. You can:

// Type JavaScript directly
console.log("Testing 123");

// Inspect variables
let x = 42;
x   // Just type the variable name to see its value

// Test functions
function add(a, b) { return a + b; }
add(3, 5)   // Returns 8

Key Console Methods

console.log("General output");
console.warn("Warning message");    // Yellow warning
console.error("Error message");     // Red error
console.table([1, 2, 3]);          // Display as table
console.clear();                    // Clear the console

The Elements Tab

Inspect and modify HTML and CSS in real-time. Any changes are temporary — refreshing the page resets them.

The Sources Tab

View your JavaScript files, set breakpoints, and step through code line by line. This is essential for debugging complex issues.

The Network Tab

See all network requests (API calls, images, scripts). Useful for debugging data fetching and performance.