Browser DevTools

Browser Developer Tools (DevTools) are a set of web developer tools built directly into modern web browsers. They allow you to inspect, debug, and optimize your web pages.

Opening DevTools

You can open DevTools using several methods:

• Right-click anywhere on a page and select Inspect.
• Windows/Linux: F12 or Ctrl + Shift + I
• macOS: Cmd + Option + I

Key Panels

1. Elements (or Inspector)

View and edit the HTML and CSS of a page in real-time.

• Inspect: Click the arrow icon to select an element on the page.
• Live Edit: Double-click tags or CSS properties to change them instantly.
• Box Model: View the computed margin, border, padding, and dimensions.

2. Console

Execute JavaScript and see logs, warnings, and errors.

• console.log(): The most common way to debug by printing values.
• Interactive: You can type variables or functions directly into the console to test them.

3. Network

Monitor all network requests (images, scripts, API calls).

• Status Codes: Check if requests succeeded (200) or failed (404, 500).
• Payload: View exactly what data was sent to or received from a server.

4. Sources (or Debugger)

Debug JavaScript using breakpoints.

• Breakpoints: Pause code execution at a specific line.
• Step Over/Into: Move through your code line-by-line to find logic errors.

5. Application (or Storage)

Inspect web storage and cookies.

• Local Storage / Session Storage: View data saved by your scripts.
• Cookies: Manage and delete browser cookies.

Useful Shortcuts

Action	Windows/Linux	macOS
Open DevTools	F12 / Ctrl+Shift+I	Cmd+Opt+I
Console Tab	Ctrl+Shift+J	Cmd+Opt+J
Search All Files	Ctrl+Shift+F	Cmd+Opt+F
Clear Console	Ctrl+L	Cmd+K

Pro Tip: Device Mode

Click the Device Toggle icon (mobile/tablet icon) to test how your website looks on different screen sizes and devices.