How to View Source Code in Google Chrome?

A website or webpage is made up of various elements which include text, images, videos etc. A page which looks very interactive and colorful to you is actually a code that runs on the browser. This code is termed as Source code which is written with the help of programming languages used in web development like HTML, CSS, JavaScript etc.

You can view the Source code of any webpage in Google Chrome or other web browsers very quickly. The source code lets you have a look at the CSS formatting & styling of the web page and its HTML code along with the scripts.

Apart from viewing the source code of the web page, you can also make some changes to it. Although, these changes will be applied only to the website that appears on your computer without affecting the original website. As soon as you refresh the page, the changes will be reversed on your computer as well.

Steps to View Source Code in Google Chrome

Method 1: View page source

Step 1: Open the webpage whose source code is to be viewed and right-click anywhere on it.
This will open a dropdown menu with various options.

Step 2: Click on “View page source” to view the source code.

This will open the source code in a new tab.

Shortcut: To view the page source, you can press “Ctrl + U” keys.

Method 2: Inspect

Step 1: Just like the previous method, right-click anywhere on the webpage to open the dropdown menu.

Step 2: Select Inspect.

The Source code will be displayed on the same screen with the webpage (as shown in the image).

Shortcut: Open the webpage and press F12 or “Ctrl + Shift + I” to inspect it.

That’s it! Now you can easily view the source code of any webpage on chrome.

Well, both, “view page source” and “inspect” show the source code of a webpage. But there is one difference between the result given by both of them.

• View Source code: It displays the source code, same as the one present on the web server.
• Inspect: The source code displayed on inspecting the webpage goes through HTML Error correction, Normalization and DOM Manipulation. Before showing the source code, the browser corrects the code for some errors.