Browser Dev Tools

Every modern browser has powerful developer tools built right in. Let's open them!

**How to open:** - **Chrome/Edge/Brave:** Press F12 or Ctrl+Shift+I (Cmd+Option+I on Mac) - **Firefox:** Press F12 or Ctrl+Shift+I - **Safari:** Enable in Preferences > Advanced > "Show Develop menu", then Cmd+Option+I

**Or right-click anywhere on a webpage** and select "Inspect" or "Inspect Element"

**What you'll see:** A panel (usually at bottom or right) with several tabs: - **Elements** — See and edit the HTML/CSS - **Console** — See errors and logs, run JavaScript - **Network** — See all files being loaded - **Sources** — See and debug JavaScript files - **Application** — Cookies, storage, and more

**Don't be intimidated!** We'll go through each useful part.

**Try it now:** Open dev tools on this page and look around!