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-update-google-chromeHow to Update Google Chrome? how-to-allow-pop-ups-in-google-chrome-featured-imageHow to block and allow Pop-ups in Google Chrome? how-to-disable-popup-blocker-in-google-chromeHow to Disable Pop-up Blocker 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 Mute Someone’s WhatsApp Status?
  • How to Bold, Itaticize, Strikethrough & Monospace Text in WhatsApp?
  • How to Clear Chats in WhatsApp?
  • How to Mute WhatsApp Notifications?
  • How to Mute WhatsApp Group?
  • How to Send Photo on WhatsApp?
  • How to Block Someone in WhatsApp?
  • How to Add Caption to Instagram Post?
  • How to use Hashtag in Instagram?
  • How to Live on Instagram?

Related Searches

  • How to remove PDF password
  • How to avail latest snapdeal offers
  • How to Recall an Email in Outlook 2010
  • How to Host a Meeting in Zoom?
  • How to Enable / Disable Regedit in Windows 7

Copyright © 2021 · QueHow · Contact Us