How to use Inspect Element to see a page’s live HTML
Updated 2026-11-09T00:00:00.000Z
Quick answer
Right-click the part of the page you care about and choose Inspect. Or press F12 (Ctrl+Shift+I) on Windows and Linux, or Option+Command+I on a Mac.
Inspect Element opens Developer Tools on the live page. It shows the HTML as it is right now, after scripts have added, removed or changed things.
Open it
| Browser | Windows and Linux | Mac |
|---|---|---|
| Chrome, Edge, Brave | F12 or Ctrl+Shift+I | Option+Command+I |
| Firefox | F12 or Ctrl+Shift+I | Option+Command+I |
| Safari | — | Option+Command+I |
In Safari, first turn on the developer menu: Safari › Settings › Advanced, then tick the option for web developer features.
The quickest way in every browser: right-click a heading, image or button and choose Inspect. The tools open with that element already selected.
Find your way around
- The Elements panel (Inspector in Firefox) shows the HTML as a tree. Click the small arrows to open and close parts.
- Hover a line and the matching part of the page lights up.
- Press Ctrl+F (Command+F on a Mac) inside the panel to search the HTML.
- Right-click an element and choose Copy › Copy outerHTML to copy its code.
Inspect or View Source?
Use Inspect to see what is on screen now, including content that scripts loaded. Use View Source to see what the server sent, which is what most search engines and link previews read first. Why the two differ.
To see the server’s HTML without opening the site at all, paste the address on viewhtmlonline.
Questions people ask
Can I change a website with Inspect Element?
Only on your own screen. Edits in Developer Tools change your copy of the page until you reload. Nobody else sees them, and the site itself does not change.
Why does Inspect show code that View Source doesn’t?
Inspect shows the page after its scripts ran. View Source shows the HTML the server sent before any script changed it.