Browser DevTools: look inside any page

Opening DevTools

On a laptop, press F12 or Ctrl+Shift+I (Cmd+Option+I on Mac), or right-click any part of a page and choose Inspect. DevTools opens next to the page.

The main panels

The Console

Your code can write messages to the Console with console.log(). Errors show up in red with the file name and line number. Reading the error message is the fastest way to fix a bug.

const prices = [120, 80, 50];
console.log('Number of items:', prices.length);
console.table(prices);
// A typo makes a red error in the Console:
// console.log(price);  -> ReferenceError: price is not defined

Device mode

The phone-and-tablet icon (Ctrl+Shift+M) shows how the page looks on a phone screen. Most visitors in India use phones, so check every page in device mode.

Debugging step by step

1. Read the error in the Console: what and which line.
2. Add console.log() before the line to see the real values.
3. Compare what you expected with what you see.
4. Fix one thing, save, reload, check again.