How to view the HTML source code of a web page

Updated: 08/31/2020 by Computer Hope

View source code

When viewing the source code of a web page, realize information and code processed by the server won’t appear in the source. For example, a search engine processes information on a server and then displays the results on a web page. In other words, you can view the code that makes up the results page, but you cannot view the search engine’s source code.

This rule applies to all server-side scripts, SSI, and programming code. Therefore, you cannot view a scripts source code used in search engines, forums, polls, chat, etc. Also, copying the information from the source code may cause errors or direct you back to the page from which you copied the information.

Microsoft Edge

Microsoft Edge

To view the source code of a web page in Microsoft Edge, follow the steps below.

  1. Press Ctrl+U or F12 on your computer’s keyboard.
  2. Select the Elements tab at the top of the right window.

Or

  1. Right-click on a blank part of the web page and select View source from the pop-up menu that appears.

Or

  1. Open Microsoft Edge and navigate to the web page of your choice.
  2. Click the More Edge more icon icon in the upper-right corner of the screen.
  3. Select Developer Tools from the drop-down menu that appears.
  4. Select the Elements tab at the top of the right window.

Tip

In Microsoft Edge, the DOM tool also provides interaction with the source code and CSS settings, allowing users to see how changes in the code affect the web page immediately.

Internet Explorer

Microsoft Internet Explorer

To view the source code of a web page in Microsoft Internet Explorer, follow the steps below.

  1. Press Ctrl+U or F12 on your computer’s keyboard.
  2. Click the Debugger tab at the top of the new menu.

Or

  1. Right-click on a blank part of the web page and select View source from the pop-up menu that appears.

Or

  1. Open Internet Explorer and navigate to the web page of your choice.
  2. Press the Alt key to bring up the browser’s menu bar.
  3. Select View, and then Source from the drop-down menu that appears.
  4. Click the Debugger tab at the top of the new menu.

Tip

With the latest versions of Internet Explorer, pressing the F12 key brings up the DOM tool. This tool provides much more interaction with the source code and CSS settings, allowing users to see how changes in the code affect the web page immediately.

Firefox

Mozilla Firefox and Netscape

To view the source code of a web page in Mozilla Firefox, follow the steps below.

  1. Press Ctrl+U on your computer’s keyboard.

Or

  1. Right-click on a blank part of the web page and select View Page Source from the pop-up menu that appears.

Or

  1. Open Mozilla Firefox and navigate to the web page of your choice.
  2. Press the Alt key to bring up the browser’s menu bar.
  3. Select Tools, Web Developer, and then Page Source.

Tip

With the latest versions of Firefox, pressing the F12 key or Ctrl+Shift+I brings up the interactive developer tool. This tool provides much more interaction with the source code and CSS settings, allowing users to see how changes in the code affect the web page immediately.

View a section of the page’s source code

  1. Highlight the portion of a web page for which you’d like to view the source code.
  2. Right-click that highlighted section, and then click View Selection Source.

Tip

Use the Firebug add-on to not only view the source code of a page but change and view those changes live through the browser.

Chrome

Google Chrome

To view the source code of a web page in Google Chrome, follow the steps below.

  1. Press Ctrl+U on your computer’s keyboard.

Or

  1. Right-click on a blank part of the web page and select View page source from the pop-up menu that appears.

Or

  1. Open Chrome and navigate the web page of your choice.
  2. Click on Customize and control Google Chrome Chrome settings icon icon in the upper-right side of the browser window.
  3. From the drop-down menu that appears, select More tools and then Developer tools.
  4. Click the Elements tab at the top of the new section that appears.

Tip

With the latest versions of Chrome, pressing the F12 key or Ctrl+Shift+I also brings up the interactive developer tool. This tool provides much more interaction with the source code and CSS settings, allowing users to see how changes in the code affect the web page immediately.

Safari

Apple Safari

To view the source code of a web page in Apple Safari, follow the steps below.

  1. Press Command + Option + U on your keyboard.

Or

  1. Right-click on a blank part of the web page and select Show page source from the pop-up menu that appears.

Or

  1. Open the Safari browser and navigate to the web page of your choice.
  2. Select the Develop menu.
  3. Choose the Show page source option.

Opera

Opera

To view the source code of a web page in Opera, follow the steps below.

  1. Press Ctrl+U on your keyboard.

Or

  1. Right-click on a blank part of the web page and select Page source from the pop-up menu that appears.

Or

  1. Open Opera and navigate to the web page of your choice.
  2. Click the Menu button Opera menu button. in the upper-left corner of the browser window.
  3. In the Developer sub-menu, choose Page source.

Tip

If you don’t see the Developer sub-menu, choose More toolsShow developer menu. Then, click the menu button Opera menu button. again. You should now see the Developer sub-menu listed.

Tip

With the latest versions of Opera, pressing the shortcut combination Ctrl+Shift+I brings up the interactive developer tool. This tool provides much more interaction with the source code and CSS settings, allowing users to see how changes in the code affect the web page immediately.

Android phone using Chrome

  1. Open the Google Chrome browser on your Android phone.
  2. Open the web page whose source code you’d like to view.
  3. Tap once in the address bar and move the cursor to the front of the URL.
  4. Type view-source: and tap Enter or Go.

Tip

For example, to view the code for our homepage, you would type view-source:https://www.computerhope.com

If the steps above don’t work on your Android phone or don’t show you the source code you’re looking for, use the source code viewing method in the iPhone or iPad using Safari section. The same code works on Android phones, the only differences are using Chrome instead of Safari, and the process to create a bookmark and edit a bookmark.

Tip

If you find it difficult navigating the source code on your mobile device using the above method, you may also want to consider using an online tool.

iPhone or iPad using Safari

Viewing the source code of a web page on an iPhone or iPad takes a bit more work to accomplish, but it is possible. The process requires you to create a bookmark, assign JavaScript code to it, and use the bookmark on a web page to view its source code.

Note

If you’d prefer to use an app to view a web page’s source code, you can download the free View Source app from the iOS App Store.

Create a bookmark to view source code

  1. Open the Safari browser on your iPhone or iPad.
  2. Access any web page, such as www.computerhope.com.
  3. Tap the More icon at the bottom of the screen.

More selector in iOS.

Tip

You can also press and hold your finger on the Bookmark icon at the bottom of the screen until a menu appears.

  1. In the menu that opens, tap the Add Bookmark option.

Option used to bring up the add bookmark screen in iOS.

  1. Tap in the bookmark name field, tap the x on the right side to clear the current name, and enter “View web page source code” as the new name.

Change bookmark name

  1. Tap Save in the top-right corner to save the bookmark.
  2. Copy the entire JavaScript code snippet below.

javascript:(function(){var a=window.open(‘about:blank’).document;a.write(‘Source code of ‘+location.href);a.close();var b=a.body.appendChild(a.createElement(‘pre’));b.style.overflow=’auto’;b.style.whiteSpace=’pre-wrap’;b.appendChild(a.createTextNode(document.documentElement.innerHTML))})();

  1. In Safari, access the bookmarks by tapping the bookmarks icon at the bottom of the screen.

Bookmarks icon on iOS device

  1. Find the bookmark you created above, then press and hold your finger on the bookmark until a menu opens at the bottom of the screen.
  2. Tap the Edit option in the menu.

Edit bookmark option on an iOS device

  1. On the Edit Bookmark screen, tap the URL and then tap the x to clear the URL, then paste the JavaScript code from step 7 into the URL field.

Paste JavaScript code in URL field

  1. Tap Done at the bottom-right of the screen to save the bookmark changes.

Use a bookmark to view source code

After you’ve created the bookmark above, you can now view the source code for a web page.

  1. In Safari, access the web page where you want to view the source code.
  2. Tap the bookmarks icon at the bottom of the screen.

Bookmarks icon on iOS device

  1. Tap the View web page source code bookmark you created.

Use view source bookmark

A new Safari browsing tab opens, displaying the source code for the web page.

Change bookmark name

Tip

If you find it difficult navigating the source code on your mobile device using the above method, you may also want to consider using an online tool.

How to close the source code page or tool

Once you’re done viewing the source code on a web page, you may want to exit or close it. Closing the source code depends on the method you’ve used to open it.

  • If you’ve used the Ctrl+U method (except Edge) or the right-click method, close the new tab that opened at the top of your browser window.
  • If you’ve used the developer method (pressing F12 or Ctrl+Shift+I), click the Edge remove x icon in the upper-right corner of the tools window.

Use an online tool to view the source code

In addition to viewing the source code using a browser, there are several online tools to view the source code of any web page. These tools can also be more helpful because some of them can also format, stylize, and highlight the code to make it easier to read. Below is a short list of some of these tools.

Additional information

Source

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.