Solice UI
Back to the curriculum

Chapter 6 · Performance & Tooling

Browser DevTools

Browser developer tools show the document, applied CSS, network requests, console messages, storage, and performance of the page that is actually running. They turn many guesses into direct observations.

Beginner · Lesson 4 of 6 in this chapter

Inspect structure and styles

The Elements panel shows the current DOM and the rules that won in the cascade. Box-model and accessibility views help explain size, spacing, roles, names, and focus behavior.

Inspect requests and errors

The Network panel shows requested URLs, statuses, timing, and response details. The Console shows runtime messages and errors, but a clear console does not prove the page is visually or behaviorally correct.

Finding a missing image

  1. Inspect the image element and confirm the final src URL.
  2. Check the Network panel for its request and status.
  3. If the response succeeds, inspect dimensions, visibility, and CSS instead of changing the server blindly.
  • Inspect the running page before changing code.
  • Use the panel that owns the observed problem.
  • Combine console, network, DOM, and visual evidence rather than trusting one signal.