Use your browser's Inspector to see the HTML, CSS, and JavaScript behind any webpage

Every webpage you see is made of code — HTML for structure, CSS for styling, JavaScript for behavior. Your browser downloads all of it and displays the result. To see that code, right-click anywhere on the page and select Inspect (Chrome, Firefox, Edge) or Inspect Element (Safari). The Inspector opens a panel showing the HTML that built what you're looking at, organized as a tree of nested elements. You can click elements in the Inspector and see exactly which code created them.

The Inspector shows you three things at once: the HTML structure on the left, the CSS rules applied to the selected element in the bottom right, and the JavaScript that runs when you interact with the page. This is the fastest way to understand how a specific part of a webpage works or to find where a particular piece of text or image lives in the code.

Key Takeaways

  • Right-click any element on a webpage and select Inspect to open your browser's developer tools and see the HTML code that created it.
  • The Inspector shows you the HTML tree, the CSS styling rules, and the JavaScript behavior all in one place, organized by which element you selected.
  • Use the element picker tool (usually a cursor icon in the top left of the Inspector) to click directly on a webpage element and jump to its code.
  • The Sources tab shows you the actual JavaScript files and their line numbers, which is useful when a page behaves in a way you want to understand.
  • The Network tab records every file the browser downloaded to build the page — HTML, CSS, images, fonts, and scripts — so you can see what sources the page pulled from.

The Inspector tab shows the HTML structure and CSS rules

When you open the Inspector, you're looking at the Elements tab (Chrome and Edge) or the Inspector tab (Firefox). This is the HTML document as your browser sees it — every tag, every attribute, every nested element. The left side shows the tree structure; the right side shows the CSS rules currently applied to whichever element you have selected.

To find a specific part of the page, use the element picker. It's usually a cursor icon in the top left corner of the Inspector panel. Click it, then click the part of the webpage you want to investigate. The Inspector jumps to that element's code and highlights it. This is much faster than scrolling through hundreds of lines of HTML looking for a particular button or heading.

The CSS panel on the right shows you every rule affecting the selected element, in order of specificity. You can see which stylesheet each rule came from, what line number it's on, and whether it's being overridden by a more specific rule. This is how you learn why something looks the way it does.

The Sources tab shows JavaScript files and where they run

Click the Sources tab to see the actual JavaScript files the page loaded. The left panel lists every file — organized by domain and folder — and the main panel shows the code inside whichever file you select. Line numbers run down the left edge, so you can reference exactly where something happens in the code.

If you want to understand what a script does when you interact with the page, you can set a breakpoint. Click the line number where you want the code to pause, then interact with the page. The code will stop at that line, and you can step through it one line at a time, watching variables change as you go. This is how developers find bugs — they watch the code run and see where it does something unexpected.

The Sources tab also shows you the call stack: the chain of functions that led to the current line of code. This tells you not just what code is running, but what triggered it to run.

The Network tab shows every file the browser downloaded

Open the Network tab and reload the page. You'll see a list of every single file the browser downloaded — the HTML document itself, CSS stylesheets, JavaScript files, images, fonts, videos, API calls, and more. Each row shows the filename, what type of file it is, how large it is, how long it took to read, and what status code the server returned (200 means success, 404 means not found, and so on).

Click any file in the list to see its details: the exact URL it came from, the headers the server sent back, the response body (the actual content), and timing information showing where the read spent its time. This is how you find out where a website is pulling images from, what API endpoints it calls, or whether a third-party script is slowing down the page load.

The Network tab is also useful for understanding what a page does when you interact with it. If you click a button and nothing seems to happen, the Network tab will show you whether the page actually sent a request to the server, what the server sent back, and whether there was an error.

The Console tab runs JavaScript commands and shows errors

The Console tab is a direct line to the page's JavaScript engine. You can type JavaScript commands and they run when ready in the context of the page. This is useful for testing ideas, checking the value of variables, or calling functions to see what they do.

The Console also shows you error messages — JavaScript errors, CSS warnings, network errors, and security warnings. If a page isn't working the way you expect, the Console is often the first place to look. Error messages usually tell you which file the error came from and what line number it's on.

You can also use the Console to inspect objects. Type the name of a variable or function and press Enter, and the Console will show you its structure. This is how you explore what data a page has access to.

The process tab shows stored data and service workers

The process tab (Chrome and Edge) or Storage tab (Firefox) shows you data the page has stored on your computer: cookies, local storage, session storage, and IndexedDB. Each of these is a way for websites to remember information about you between visits. You can see what data is stored, delete it, or edit it directly.

This tab also shows you service workers — background scripts that run even when the page isn't open, used for offline functionality and push notifications. You can see which service workers are registered, unregister them, or trigger them manually.

View the page source to see the raw HTML file

The Inspector shows you the HTML as the browser has processed it, which can be different from the raw HTML file the server sent. To see the original file, right-click the page and select View Page Source (or press Ctrl+U on Windows, Command+U on Mac). This opens the raw HTML in a new tab, exactly as it came from the server.

The page source view is plain text with line numbers. You can search it with Ctrl+F or Command+F, and you can see comments the developer left in the code. However, you can't interact with it the way you can in the Inspector — you can't click elements to highlight them or see the CSS rules applied to them.

Use View Page Source when you need to see the original HTML structure, find links to external files, or read comments. Use the Inspector when you need to understand how the page actually looks and behaves after the browser has processed it.

Frequently Asked Questions

Why does the Inspector show different HTML than View Page Source?

View Page Source shows the raw HTML file the server sent. The Inspector shows the HTML after the browser has processed it and after JavaScript has modified it. If JavaScript adds, removes, or changes elements after the page loads, you'll see those changes in the Inspector but not in View Page Source.

How do I find out what server a file came from?

Open the Network tab, reload the page, and click the file you're interested in. The Headers section shows the full URL, including the domain. You can also see the server's response headers, which sometimes include information about what software is running on the server.

Can I edit the code I see in the Inspector?

Yes, you can edit HTML and CSS directly in the Inspector to test changes, but the changes only exist in your browser while you're looking at the page. They don't save to the server, and they disappear when you reload. This is useful for testing ideas without actually changing the website.

What does a 404 error in the Network tab mean?

A 404 means the server couldn't find the file at that URL. This usually means the file was deleted, moved, or the URL is wrong. If you see 404s in the Network tab, the page might not be displaying images or running scripts the way the developer intended.

How do I learn about a page is using a third-party service?

Open the Network tab and look at the domain names in the URL column. Files from domains other than the main website are third-party services — analytics, advertising, fonts, maps, or other features. Click any of them to see what data is being sent and where.