When you browse the internet, you are looking at a highly polished, visual representation of text, images, and colors. However, your web browser is actually reading thousands of lines of raw text formatting called HTML (HyperText Markup Language), alongside CSS (for styling) and JavaScript (for interactivity). The browser’s job is to instantly translate that raw code into the beautiful page you see.
If you are learning web development, trying to figure out why an image isn’t loading on your own site, or simply curious about how a competitor structured their homepage, you can easily look behind the curtain. Google Chrome allows anyone to view the raw, unedited source code of any public web page.
Method 1: View Page Source (The Static View)
The simplest way to view the HTML is to use the “View Page Source” command. This opens a new tab displaying a massive wall of raw text—exactly what the server sent to your browser before it was rendered.
- Open Google Chrome and navigate to the web page you want to inspect.
- Right-click on any empty space on the page (avoid clicking on an image or a link).
- Select View Page Source from the context menu. (Alternatively, use the keyboard shortcut Ctrl + U on Windows or Cmd + Option + U on Mac).
A new tab will open containing the raw HTML document. You will see structural tags like <head>, <body>, and <div>. Because this document can be tens of thousands of lines long, the easiest way to find what you are looking for is to press Ctrl + F (or Cmd + F) to open the search bar and type a specific keyword.
Note: This static view does not show any changes made to the page dynamically by JavaScript after it initially loaded.
Method 2: Inspect Element (The Developer View)
While “View Page Source” is interesting, professional web developers rarely use it. Instead, they use Chrome’s built-in Developer Tools (specifically the Elements panel). This tool is infinitely more powerful because it is interactive.
If you see a specific button on a website and want to know exactly what font color it uses, reading the raw source code will take hours. Inspect Element shows you instantly.
- Navigate to a web page in Chrome.
- Find a specific element you are curious about (e.g., a large headline or a button).
- Right-click directly on that specific element.
- Select Inspect from the very bottom of the context menu.
Understanding the Developer Tools Panel
A massive panel will split your screen (usually appearing on the right side or the bottom). Do not be intimidated by the dense code; it is highly organized.
- The Elements Tab (Left side): This shows the HTML structure of the page. Crucially, Chrome will automatically highlight the exact line of code corresponding to the headline you right-clicked. If you hover your mouse over other lines of code in this panel, Chrome will highlight the corresponding visual element on the actual web page in blue.
- The Styles Tab (Right side): This shows the CSS styling applied to whatever HTML element you currently have selected. This is where you can see the exact HEX color codes, font sizes, and padding margins the designer used.
Live Editing (The Fun Part)
The most powerful feature of the Inspect tool is that you can edit the code on your screen in real-time. (Do not worry, you are not hacking the website; you are only changing how the code looks on your personal computer screen. As soon as you hit refresh, everything reverts to normal).
- Right-click a headline on a news website and select Inspect.
- In the Elements panel, find the black text of the headline nestled between the HTML tags.
- Double-click the text.
- Delete the real news headline, type “I am the new CEO of this company!”, and press Enter.
The actual website on your screen will instantly update to display your fake headline perfectly formatted in their official font. (This is exactly how people generate fake “viral” screenshots of tweets or news articles).