How to View Page Source in Any Browser (And on Mobile)
Learn how to view page source in Chrome, Firefox, Edge, and Safari using view-source:, right-click, and keyboard shortcuts — plus the mobile workaround when the command is missing.
Every rendered web page is built from a text document that a browser downloaded, parsed, and drew on screen. That text document is the page source, and knowing how to open it is one of the most useful skills in web work. This guide covers every desktop method, explains why what you see in DevTools is not always the real source, and shows how to get the same view on a phone.
What “page source” actually means
When you type an address, the server responds with an HTML file plus references to stylesheets, scripts, fonts, and images. The browser turns that HTML into a Document Object Model (the DOM) and then paints the page.
Viewing the page source means looking at the raw HTML the server sent — before the browser modified anything. That is distinct from inspecting the live DOM, which reflects every change JavaScript has made since load. Both views are useful, but they answer different questions.
- Raw source answers: what did the server actually send?
- Live DOM answers: what does the page look like right now to scripts?
The tool at View Source Online fetches and displays the raw HTML that a server returns, syntax-highlighted, without running any page JavaScript.
The view-source: prefix, browser by browser
The oldest and most direct method is a URL scheme. Type view-source: before a full address in the address bar.
view-source:https://example.com/Press Enter and the browser opens a plain text rendering of the HTML response. This works in desktop Chromium browsers and Firefox. Here is the state of it across the major browsers:
| Browser | view-source: supported |
Notes |
|---|---|---|
| Chrome (desktop) | Yes | Opens in a new tab as plain text |
| Edge (desktop) | Yes | Same behavior as Chrome |
| Firefox (desktop) | Yes | Adds line wrapping and a syntax highlight |
| Safari (desktop) | No | Removed the scheme; use the menu or DevTools |
| Mobile Safari (iOS) | No | No equivalent built in |
| Chrome for Android | No | Scheme is not exposed to users |
Firefox historically offered the richest view-source: experience, including clickable links inside the source and configurable line wrapping. Chrome and Edge show a simpler read-only text view.
Right-click and menu routes
If you prefer menus over typing, every desktop browser exposes source viewing:
- Chrome / Edge — right-click the page and choose View Page Source, or open the three-dot menu, then More tools → Developer tools and use the Sources panel.
- Firefox — right-click and choose View Page Source, or press the menu and go to Tools → Browser Tools.
- Safari — enable the Develop menu under Settings → Advanced, then use Develop → Show Page Source.
Right-clicking a specific element and choosing Inspect jumps straight to the DOM node in the Elements/Inspector panel rather than the raw document. That is usually the faster path for debugging layout, while View Page Source is better for reading metadata and the document as delivered.
Keyboard shortcuts that save time
Opening source from the keyboard is faster once the habit sticks:
- Chrome / Edge (Windows and Linux):
Ctrl+Ufor source,Ctrl+Shift+Ifor DevTools. - Chrome / Edge (macOS):
Cmd+Option+Ufor source,Cmd+Option+Ifor DevTools. - Firefox (Windows and Linux):
Ctrl+Ufor source,Ctrl+Shift+Ifor DevTools. - Firefox (macOS):
Cmd+Ufor source,Cmd+Option+Ifor DevTools. - Safari (macOS):
Option+Cmd+Ufor source once the Develop menu is enabled.
A caveat: many sites bind these shortcuts or block context menus with JavaScript. If right-click or Ctrl+U does nothing, the page is deliberately interfering with the default. The view-source: prefix still works in Chromium and Firefox because it is handled by the browser, not the page.
Elements vs raw source: why the DOM differs
This is the single most misunderstood part of viewing source. Open DevTools, right-click the <html> element, and choose Copy → Copy outerHTML. Compare that with the View Page Source tab and they often look nothing alike.
Reasons the two diverge:
- JavaScript mutates the DOM. Single-page apps can render thousands of nodes after the initial HTML arrives. The source may contain only a root
<div>and a script tag. - The parser normalizes markup. Browsers insert missing
<html>,<head>, and<body>tags, fix invalid nesting, and move malformed elements around. The DOM is a corrected tree; the source is the author’s original text. - Framework hydration rewrites attributes. React, Vue, and similar libraries can replace or augment server-rendered markup on mount.
- Content is injected from APIs. Prices, comments, and search results frequently arrive over
fetchor WebSocket after first paint.
If your goal is to check a title tag, a meta description, a canonical URL, or JSON-LD structured data, use the raw source — that is what crawlers read first and what the server intended to publish. If your goal is to debug why a button has the wrong color, use the live DOM. Each view has a job.
Viewing source on mobile
Mobile browsers generally omit view-source: entirely. There is no address-bar command, no long-press option, and no built-in “page source” menu in iOS Safari or Chrome for Android. Long-pressing a link only offers previews and sharing, not the underlying HTML.
A few things people try, and why they fall short:
- Typing
view-source:in mobile Safari — the scheme is unrecognized and the request fails. - Using a file manager or download — you get a saved page, not the server’s response, and assets break.
- Tapping “Inspect” in a desktop-emulation mode — desktop Chrome DevTools remote debugging exists, but it needs a tethered computer, which defeats the point of doing it on the phone.
- Sharing the URL to a notes app — you copied a link, not the HTML.
The practical answer is a web-based viewer. Open the analyzer at View Source Online, paste the URL, and the server fetches the response and returns the formatted source for you. It works in any mobile browser, needs no account, and stores nothing. The companion guide How to View Source Code on Mobile walks through the phone workflow step by step.
Reading source like a pro
Once the source is open, a few patterns repay attention immediately. Scan the <head> for the <title>, <meta name="description">, <link rel="canonical">, Open Graph tags, and any <script type="application/ld+json"> blocks. Search for data-, srcset, loading="lazy", and CDN hostnames to understand how assets are delivered. Check robots meta tags and hreflang links if the site is multilingual.
For a one-shot view that combines the raw HTML with page speed timings, server and TLS details, an SEO audit, security header grading, and detected technologies, run the URL through the View Source Online analyzer. It gives you the raw document and the surrounding context in a single pass.
Actionable takeaway: memorize Ctrl+U / Cmd+Option+U for desktop, but keep a browser-based viewer bookmarked for the moments when the native command is blocked or you are on a phone. Raw source tells you what the server sent; the DOM tells you what the browser did with it — always confirm which one you need before drawing conclusions.