Browser DevTools for HTML

Introduction

Browser DevTools are part of the web development workflow, not an advanced extra. They let you inspect the DOM, temporarily edit elements, find missing files, read console errors, and run Lighthouse audits for performance, SEO, and accessibility. This chapter gives you a practical HTML-focused DevTools workflow.

Prerequisites

• Data attributes
• A page with links, images, CSS, and optional JavaScript
• Chrome, Edge, Firefox, or another modern browser

Opening DevTools

Common shortcuts:

Start with these panels:

Elements Panel: Inspect the DOM

The Elements panel shows the browser's parsed DOM:

<main>
  <article>
    <h1>HTML DevTools Practice</h1>
    <p>Inspect this paragraph.</p>
  </article>
</main>

In DevTools you can:

• expand and collapse nodes
• select an element on the page
• edit text temporarily
• add or remove attributes
• see computed accessibility information in supported browsers

Temporary Edits

You can double-click text or attributes in DevTools:

<h1>Old title</h1>

Change it temporarily to:

<h1>New title</h1>

This helps test copy, class names, or image paths quickly. But DevTools edits are not saved to your file. When you refresh, they disappear unless you update the source file in your editor.

Inspect Attributes

Use Elements to verify:

• alt is present on meaningful images
• href points to the expected URL
• id values are unique
• aria-describedby points to an existing element
• data-* attributes have the value JavaScript expects

Example:

<button
  type="button"
  data-action="open-menu"
  aria-expanded="false"
>
  Menu
</button>

If JavaScript changes aria-expanded, the Elements panel should update live.

Network Panel: Find Missing Files

Open Network, reload the page, and filter by resource type:

• Doc for the HTML file
• CSS for stylesheets
• JS for scripts
• Img for images
• Media for audio/video

Common status codes:

Broken image example:

<img src="images/hero.jpg" alt="Team at work">

If Network shows 404 images/hero.jpg, check:

• file name spelling
• folder path
• capitalization (Hero.jpg vs hero.jpg)
• whether the file was deployed

Disable Cache While Debugging

In Chrome/Edge DevTools Network panel, enable Disable cache while DevTools is open. This helps when CSS or images appear stale after edits.

Do not assume a bug is fixed until you test after a hard reload:

• macOS: Cmd + Shift + R
• Windows/Linux: Ctrl + Shift + R

Console Panel

The Console shows JavaScript errors and resource-related messages.

Example missing script:

<script src="js/app.js" defer></script>

If the file is missing, you may see:

GET http://localhost:5500/js/app.js 404 (Not Found)

You can also run small checks:

document.title
document.querySelector("main")
document.querySelectorAll("img:not([alt])")

These snippets help audit HTML quickly.

Accessibility Checks in DevTools

Inspect a button:

<button type="button" aria-label="Close dialog">x</button>

Look for:

• role: button
• name: Close dialog
• focusable: yes

For an image:

<img src="logo.svg" alt="Acme Tools">

Check whether the accessible name is the alt value.

Lighthouse Audits

Lighthouse can check:

• Performance
• Accessibility
• Best Practices
• SEO

Run it from DevTools:

1. Open Lighthouse.
2. Choose categories.
3. Run the audit.
4. Read failed audits before chasing the score.

For HTML-focused work, pay attention to:

• document has a title
• meta description exists
• image elements have alt
• links have discernible names
• form controls have labels
• tap targets and contrast (CSS-related)

View Source vs Inspect

Use View Source to see what the server sent:

view-source:http://localhost:5500/index.html

Use Inspect to see the live DOM.

They differ when:

• JavaScript modifies content
• the browser fixes invalid HTML nesting
• frameworks hydrate or render content
• DevTools temporary edits are active

For this HTML track, both are useful: View Source checks your file output; Inspect checks what the browser actually built.

Mini Debugging Checklist

When a page looks wrong:

1. Elements: Is the expected element in the DOM?
2. Network: Did CSS, JS, and images load with 200?
3. Console: Are there errors?
4. Elements: Are attributes correct?
5. Lighthouse: Any accessibility or SEO red flags?
6. Hard reload: Is cache hiding the fix?

Mini Exercise

Create a page with one intentional mistake in each category:

• an image path typo
• a link to a missing page
• an input without a label
• duplicate id values

Use DevTools to find and fix each problem. Keep notes on which panel revealed each issue.

FAQ

Are DevTools changes saved automatically?

No. Most edits are temporary. Update the real file in your editor.

Why does DevTools show tags I did not write?

The browser may repair invalid HTML or JavaScript may add elements after load.

Should I use Chrome DevTools only?

Chrome and Edge are common, but Firefox DevTools are excellent too. Testing more than one browser is healthy.

Why does Network show 304 instead of 200?

The browser checked the cache and reused a file. Disable cache while debugging if this confuses you.

What comes next?

HTML validation — use validators and linting to catch invalid markup before browsers silently repair it.