QueHow

A How-To and wiki Blog

  • Operating System
    • Windows
      • Windows 10
      • Windows 7
    • Linux
  • Software
    • Application Software
    • Microsoft Office
      • Outlook
      • Word
      • PowerPoint
  • Internet
    • Browsers
      • Mozilla Firefox
      • Google Chrome
    • CMS
    • Tips & Tricks
  • Website
    • ecommerce
    • Google
    • Social Networking
    • General Websites
  • Mobile
  • Email
    • Gmail
  • Wiki

How to View Source Code in Google Chrome?

By Neha T Leave a Comment

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.

view page source

This will open the source code in a new tab.

sourceCode

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.

inspect

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

source-inspect

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.

You Might Also Like:

how-to-sync-bookmark-in-chrome-step-featured-imagesHow to Export Bookmarks in Google Chrome? how-to-translate-a-page-in-google-chromeHow to Translate a Webpage in Google Chrome? how-to-restore-previous-session-in-chrome-featured_imageHow to restore a previous Session in Google Chrome? how-to-change-start-pages-on-chrome-featured-imageHow to Change Start Pages in Google Chrome? how-to-view-saved-passwords-in-google-chrome-featured-imageHow to view saved Passwords in Google Chrome? how-to-allow-pop-ups-in-google-chrome-featured-imageHow to block and allow Pop-ups in Google Chrome? How-to-update-google-chromeHow to Update Google Chrome? how-to-block-a-website-in-google-chrome-featured-imageHow to Block a Website in Google Chrome?

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Most Viewed

  • How to Install and Use TELNET in Ubuntu
  • How to install Hindi fonts in MS Word
  • How to Change a File Extension in Windows 10?
  • How to create a flipkart account in 3 simple steps
  • How to Change Monitor Refresh Rate in Windows 10?
  • How to install IIS on Windows 10
  • How to Insert Clickable Checkbox in MS Word 2016?
  • How to Set Auto Reply in Outlook 2016?
  • How to Login as Administrator in Windows 10?
  • How to Check RAM Size and System Type in Windows 10?

Recent Additions

  • How to Add Hyperlink to Another Sheet in Excel?
  • How to Add and Remove Watermark in Excel
  • How to use Relative and Absolute Cell Reference in Excel?
  • How to Enable and Disable Scroll Lock in Excel?
  • How to Use INDEX and MATCH Functions in Excel?
  • How to Make Bar Graph in Excel?
  • How to Count Duplicate Values in Excel?
  • How to Wrap Text in Excel?
  • How to Round off Numbers in Excel?
  • How to Create a Bell Curve in Excel?

Related Searches

  • How to Add Caption to Instagram Post?
  • How to Download Private Instagram Stories?
  • How to Insert a YouTube Video in MS PowerPoint 2016?
  • How to enable numlock automatically in Ubuntu 14.04
  • How to Mute Someone’s WhatsApp Status?

Copyright © 2023 · QueHow · Contact Us