The Elements (or Inspector) panel shows the DOM tree and applied styles. You can edit HTML and CSS live and see changes immediately. Use "Inspect" (right-click → Inspect) to jump from the page to the node in the tree.

Check the box model (content, padding, border, margin) and use the accessibility panel to see how assistive tech interprets the node. Toggle pseudo-classes (:hover, :focus) to test styles.

Console shows logs, errors, and warnings. You can run snippets and inspect objects. Sources (or Debugger) lists scripts; set breakpoints, step through code, and watch variables. Call stack and scope are visible when paused.

Source maps map minified or transpiled code back to your original source so breakpoints and errors point to the right file and line. Enable them in your build (e.g. devtool: "source-map").

Network lists every request (XHR, fetch, script, image). You see URL, status, size, and timing. Filter by type, throttle to simulate slow connections, and inspect request/response headers and body.

Performance (or Lighthouse) records a trace and reports LCP, FID, CLS, and other metrics. Use it to find long tasks, layout thrash, and slow resources. [MDN – Debugging](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started).