How to View the Source Code of a Web Page in Every Browser

Illustration showing source code on a laptop screen

Logovski/Getty Images

by Scott Orgera
Scott Orgera is a former writer who covering tech since 2007. He has 25+ years experience as a programmer and QA leader, and holds several Microsoft certifications.
Updated July 22, 2019

The web page you are reading is made up of, among other things, source code. That's the information your web browser downloads and translates into what you are reading right now.

Most web browsers provide the ability to see the source code of a web page with no additional software required, no matter what type of device you're on.

Some even offer advanced functionality and structure, making it easier to peruse HTML and other programming code on the page.

Why Would You Want to See the Source Code?

There are several reasons why you may want to see a page's source code. If you're a web developer, perhaps you'd like take a peek under the covers at another programmer's particular style or implementation. Maybe you're in quality assurance and are trying to ascertain why a certain part of a web page is rendering or behaving the way it is.

You could also be a beginner trying to learn how to code your own pages and are looking for some real-world examples. Of course, it's possible that you don't fall into any of these categories and just want to view source out of sheer curiosity.

Listed below are instructions on how to view the source code in your browser of choice.

Google Chrome

Running on: Chrome OS, Linux, macOS, Windows

The desktop version of Chrome offers three different methods for viewing a page's source code, the first and simplest by using the following keyboard shortcut: CTRL + U (COMMAND + OPTION + U on macOS).

When pressed, this shortcut opens a new browser tab displaying HTML and other code for the active page. This source is color-coded and structured in a manner that makes it simpler to compartmentalize and find what you're looking for. You can also get there by entering the following text in Chrome's address bar, appended to the left-hand side of the web page's URL, and selecting the Enter key: view-source: (i.e., view-source:https://www.lifewire.com).

The third method is via Chrome's developer tools, which allow you to take a deeper dive into the page's code as well as tweak it on-the-fly for testing and development purposes. The developer tools interface can be opened and closed by using this keyboard shortcut: CTRL + SHIFT + I (COMMAND + OPTION + I on macOS). You can also launch them by taking the following path.

  1. Select Chrome's main menu button, located in the upper right-hand corner and represented by three vertically-aligned dots.

  2. When the drop-down menu appears, hover your mouse cursor over the More tools option.

  3. When the sub-menu appears, select Developer tools.

Android

Viewing a web page's source in Chrome for Android is as simple as appending the following text to the front of its address (or URL) and submitting it: view-source:. An example of this would be view-source:https://www.lifewire.com. HTML and other code from the page in question will be instantly displayed in the active window.

iOS

While there are no native methods for viewing source code using Chrome on your iPad, iPhone or iPod touch, the simplest and most effective is to utilize a third-party solution such as the View Source app.

Available for $0.99 in the App Store, View Source prompts you to enter the page's URL (or copy/paste it from Chrome's address bar, which is sometimes the simplest path to take) and that's it. In addition to showing HTML and other source code, the app also has tabs that display individual page assets, the Document Object Model (DOM), as well as page size, cookies, and other interesting details.

Microsoft Edge

Running on: Windows

The Edge browser lets you view, analyze and even manipulate the current page's source code through its Developer Tools interface. To access this handy toolset you can use one of these keyboard shortcuts: F12 or CTRL + U. If you'd prefer the mouse instead, click on Edge's menu button (three dots located in the upper right-hand corner) and choose the F12 Developer Tools option from the list.

After the dev tools are run for the first time, Edge adds two additional options to the browser's context menu (accessible by right-clicking anywhere within a web page): Inspect element and View source, the latter which opens the Debugger portion of the dev tools interface populated with source code.

Mozilla Firefox

Running on: Linux, macOS, Windows

To view a page's source code in the desktop version of Firefox you can press CTRL + U (COMMAND + U on macOS) on your keyboard, which will open a new tab containing HTML and other code for the active web page.

Typing the following text into Firefox's address bar, directly to the left of the page's URL, will cause the same source to show up in the current tab instead: view-source: (i.e., view-source:https://www.dotdash.com).

Another way to access a page's source code is through Firefox's developer tools, accessible by taking the following steps.

  1. Select the main menu button, located in the upper right-hand corner of your browser window and represented by three horizontal lines.

  2. When the pop-out menu appears, click on the Developer "wrench" icon.

  3. The Web Developer context menu should now be visible. Select the Page Source option.

Firefox also lets you view the source code for a particular portion of a page, making it easy to isolate issues. To do so, first, highlight the area that you are interested in with your mouse. Next, right-click and choose View Selection Source from the browser's context menu.

Android

Viewing source code in the Android version of Firefox is achievable by prefixing the web page's URL with the following text: view-source:. For example, to view the HTML source for Dotdash you'd submit the following text in the browser's address bar: view-source:https://www.dotdash.com.

iOS

Our recommended method for viewing web page source code on your iPad, iPhone or iPod touch is through the View Source app, available in the App Store for $0.99. While not integrated directly with Firefox, you can easily copy and paste a URL from the browser into the app in order to unveil the HTML and other code associated with the page in question.

Apple Safari

Running on iOS and macOS

iOS

Although Safari for iOS does not include the ability to view page source by default, the browser does integrate rather seamlessly with the View Source app, available in the App Store for $0.99.

After installing this third-party app return to the Safari browser and tap on the Share button, located on the bottom of the screen and represented by a square and an up arrow. The iOS Share Sheet should now be visible, overlaying the lower half of your Safari window. Scroll to the right and select the View Source button.

A color-coded, structured representation of the active page's source code should now be displayed, along with other tabs which allow you to view page assets, scripts and more.

macOS

To view the source code of a page in the desktop version of Safari, you first need to enable its Develop menu. The steps below walk you through activating this hidden menu and displaying a page's HTML source.

  1. Select Safari in the browser menu, located at the top of the screen.

  2. When the drop-down menu appears, select the Preferences option.

  3. Safari's Preferences should now be visible. Click on the Advanced icon, located on the far right-hand side of the top row.

  4. Towards the bottom of the Advanced section is an option labeled Show Develop menu in menu bar, accompanied by an empty checkbox. Select this box once to place a checkmark in it, and close the Preferences window by clicking on the red 'x' found in the upper left-hand corner.

  5. Select the Develop menu, located at the top of the screen.

  6. When the drop-down menu appears, select Show Page Source. You can also use the following keyboard shortcut instead: COMMAND + OPTION + U.

Opera

Running on: Linux, macOS, Windows

To view source code from the active web page in the Opera browser use the following keyboard shortcut: CTRL + U (COMMAND + OPTION + U on macOS). If you'd prefer loading the source in the current tab instead, type the following text to the left of the page's URL within the address bar and hit Enter: view-source: (i.e., view-source:https://www.lifewire.com).

The desktop version of Opera also allows you to view HTML source, CSS, and other elements by using its integrated developer tools. To launch this interface, which by default will appear on the right-hand side of your main browser window, press the following keyboard shortcut: CTRL + SHIFT + I (COMMAND + OPTION + I on macOS).

Opera's developer toolset is also accessible by taking the following steps.

  1. Select the Opera logo, located in the upper left-hand corner of your browser window.

  2. When the drop-down menu appears, hover your mouse cursor over the More tools option.

  3. Click on Show developer menu.

  4. Select the Opera logo again.

  5. When the drop-down menu appears, hover your cursor over Developer.

  6. When the sub-menu appears, select Developer Tools.

Vivaldi

There are multiple ways to view page source within the Vivaldi browser. The simplest is via the CTRL + U keyboard shortcut, which presents code from the active page in a new tab.

You can also add the following text to the front of the page's URL, which displays the source code in the present tab: view-source: An example of this would be view-source:http://www.dotdash.com.

Another method is through the browser's integrated developer tools, accessible by pressing the CTRL + SHIFT + I combination or through the Developer Tools option in the browser's Tools menu — found by selecting the V logo in the upper left-hand corner. Using the dev tools allows for a much more in-depth analysis of the page's source.