We’ll debug one broken page using Network, Sources, Elements, and Application. Earlier lessons explained how the browser loads and renders a page. Now we’ll use those tools to locate failures before changing the source.

The DevTools overview maps the panels, keyboard shortcuts, device mode, and Lighthouse. Use it when you need help finding a panel.

Make a page with reproducible failures

Create index.html and serve it with your local dev server. You can use npx serve . in this practice folder:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>DevTools practice</title>
  <link rel="stylesheet" href="missing.css">
</head>
<body>
  <h1>Reading list</h1>
  <button id="load" type="button">Load title</button>
  <p id="title"></p>
  <script>
    const button = document.querySelector('#load')
    const title = document.querySelector('#titlle')
    button.addEventListener('click', () => {
      title.textContent = localStorage.getItem('reading-title') || 'JavaScript'
    })
  </script>
</body>
</html>

Open DevTools with Command + Option + I on macOS, or Control + Shift + I on Windows and Linux.

Follow the missing stylesheet

Open Network, disable the cache, and reload. Find missing.css. Record its full URL, status, and Initiator. The failed request should be a 404; the Initiator points to the HTML link that caused it.

Create styles.css with a visible rule:

body {
  font-family: system-ui, sans-serif;
}

Change the HTML link to styles.css. Reload and confirm Network shows a successful CSS response. Select the body in Elements and find the matching font declaration in Styles.

Try changing the declaration in DevTools, then reload. The temporary edit disappears. Make the change in styles.css if you want to keep it.

Pause where the click fails

Click Load title. Read the Console error, then enable Pause on uncaught exceptions in Sources and click again. Execution stops at the attempted textContent assignment.

Inspect title while paused. It is null. Follow its assignment back to the selector and compare it with the paragraph’s actual ID in Elements.

Fix #titlle to #title in the source. Reload, click, and confirm JavaScript appears without an exception. Turn exception pausing off when you’ve finished.

Explain a result that survives reload

With the typo fixed, use the Console on your own practice page to set a stored title:

localStorage.setItem('reading-title', 'Old saved title')

Reload and click. The result changes even though you didn’t edit the HTML or script. In Application, find Local Storage for this origin and inspect reading-title. Delete just that key and click again. The fallback title returns.

This is why reloading alone doesn’t reset an application’s state. Clearing all site data can hide the cause, so identify the particular key first. Only paste code you understand; Console code can access the page’s session.

Keep evidence for the fix

For each failure, write down the symptom, panel, observed value, source change, and successful retest. Avoid exporting a HAR containing private cookies or authorization headers.

You should have evidence for the failed CSS URL, the null DOM reference, and the stored title. A screenshot of the corrected page doesn’t explain all three. The next performance recording lesson uses the same habit to investigate delays.

Trace a broken page across DevTools panels