Tech News Today
  • Hardware
    • Motherboards
    • CPUs
    • Graphic Cards
    • RAM
    • SSDs
    • Computer Cases
    • Monitors
    • Peripherals
    • Power Supply Unit
    • PC Builds
    • Computer Tips
  • Software
  • Operating System
    • Windows
    • Mac
    • Linux
  • Gaming
  • Mobile
  • Console
  • More
    • Internet
    • Networking
    • Security
    • Buyer’s Guide
    • Gadgets
    • Laptops
    • Reviews
    • How To
    • News
Facebook Twitter Instagram
Tech News Today
  • Hardware
    • Motherboards
    • CPUs
    • Graphic Cards
    • RAM
    • SSDs
    • Computer Cases
    • Monitors
    • Peripherals
    • Power Supply Unit
    • PC Builds
    • Computer Tips
  • Software
  • Operating System
    • Windows
    • Mac
    • Linux
  • Gaming
  • Mobile
  • Console
  • More
    • Internet
    • Networking
    • Security
    • Buyer’s Guide
    • Gadgets
    • Laptops
    • Reviews
    • How To
    • News
Tech News Today
Home » Google Chrome

How to Open a Source Code in Google Chrome? 4 Simple Ways

Abhishek SilwalBy Abhishek SilwalApril 9, 2023
how to open a source code

Viewing the source code of any HTML page is a good way to learn HTML for beginners as well as intermediate programmers. Also, if you need to extract data from sites that don’t restrict such actions for your web scraping projects, you must understand the code blocks and tags on the source code.

Google Chrome allows you to check the source code of any webpage in two ways. One way is to view the source HTML code directly from the web server. It usually opens as a single “View Source” tab.

Another way is to check the code after the web browser has optimized the real source code and added any Javascript manipulation. Chrome shows this as the Inspect Elements tool, and this utility is actually there for the benefit of any developer.

Table of Contents

  • Using Shortcuts
  • Using Context Menu
  • By Editing URL
  • Through Chrome Menu
  • Understanding Source Codes

Using Shortcuts

The easiest way to open a webpage’s source code in Chrome is through the keyboard shortcut.

To open the View Source tab, press Ctrl + U on Windows. On Mac, this shortcut is ⌘-Option-U. 

If you need to open the Inspect Elements tool, you need to press Ctrl + Shift + C. You can also press F12 or Ctrl + Shift + I to open the Developers tool and then go to the Elements tab.

Using Context Menu

The context menu (right-click menu) on Google Chrome’s web pages also includes the options to open the source code. You can choose to view the unaltered source code or the code after optimization by the browser.

  1. Right-click anywhere when you are inside the webpage.
  2. Select View page source or Inspect as per your need. Inspect will bring you to the exact code block corresponding to the graphical element where you right-clicked.
    chrome-context-menu-view-page-source-inspect

By Editing URL

Another way to view the source code is by adding a code snippet to the URL. If you use the above options to view the page source, you might have seen view-source: in the source code’s URL address. You can actually enter this code manually to perform the same task.

This method is also useful if you want to view the source code on mobile devices as they usually don’t offer other methods.

  1. Click on the Address bar.
  2. Press Home or keep holding the left key till the keyboard cursor gets in front of the URL, even before https://
  3. Type view-source: and press Enter. So, if the URL was https://www.google.com, it should now become view-source:https://www.google.com
    view-source-google-com

Through Chrome Menu

It is also possible to open the Inspect Elements tool from within Chrome’s control menu. Here, you can open the Developers tool which includes Elements along with other tools such as the Chrome Console.

  1. Click on the triple-dot icon inside the Chrome window.
  2. Go to More tools and select Developer tools.
    chrome-more-tools-developer-tools

Understanding Source Codes

understanding-source-code

After viewing the source code, you need to know Hypertext Markup Language (HTML) to be able to analyze and read the source code. If you are not that familiar with this programming language, here are a few things about the code to help you get started.

Tags or Elements

These are the main keywords in an HTML code. They are closed by ‘<>’ and represent the type of content. An element usually consists of the opening and the closing tag to show the start and the end of the element’s content respectively.  But some elements only use a single tag.

For instance: <p>Here’s a paragraph</p>

“Here’s a paragraph” is a paragraph element enclosed by the tags <p> and </p> that specify this content as a paragraph.

Tags are not case-sensitive.

Attributes

These are the keywords that determine the additional properties of the HTML elements. They are also present inside the angle brackets but after the opening tag’s keyword. Some common attributes include class, title, style, id, etc.

For instance: <p id=“para”>Here’s a paragraph</p>

The paragraph has the attribute “para” as an identity (id).

Some specific attributes are case-sensitive, and the rest are case-insensitive.

Important Elements of the Source Code

  • Head (<head>…</head>) – It provides the webpage’s information.
  • Title (<title>…</title>) – It shows the webpage’s title. Search engines like Google Search index the contents of the title so that it can find these webpages when someone searches for them.
  • Body (<body>…</body>) – It specifies all the contents of the webpage.
  • Headings – Different tiers of headings come with separate tags such as <h1>…</h1>, <h2>…</h2>, and so on. These also provide automatic margins before and after the heading.
  • Paragraphs <p>…</p> – Contains all the text inside or outside a heading.
  • Lists – The ordered lists that use alphabets or numbers to order the list use the tags <ol>…</ol> and the unordered ones that use bullets use the tags <ul>…</ul>. Inside these root tags, all list elements come inside <li>…</li>.
  • Images (<img>) – It doesn’t need any content and uses the attribute src to specify the image source. The alt attribute specifies the alternative text that describes the image.
  • Hyperlinks (<a>…</a>) – It uses the attribute href to specify the referral link. Usually, it’s best to add the attribute rel=”noopener noreferrer” to external links.
    If the href attribute contains a hashtag and then some text, such as <a href=“#link”>link</a>, it shows an internal linking to the element with the id link.
  • Comments – All the texts inside ‘<!– ’ and ‘ –>’ are comments and can be ignored. They usually provide additional information about the successive elements.
how-to
Abhishek Silwal
  • LinkedIn

Abhishek Silwal is an Electronics Engineer and a technical writer at TechNewsToday. He specializes in troubleshooting a wide range of computer-related issues. His educational background in Electronics Engineering has given him a solid foundation in understanding of computers. He is also proficient in several programming languages and has worked on various robotics projects. Even in his early days, he used to tinker with various computer components, both hardware, and software, to satiate his curiosity. This experience has given him a breadth of experience that goes beyond his educational qualification. Abhishek has been writing articles on dealing with varieties of technical issues and performing specific tasks, especially on a Windows machine. He strives to create comprehensive guides on fixing many system and hardware issues and help others solve their problems. You can contact him at abhisheksilwal@technewtoday.com

Related Posts

how to delete all chrome bookmarks 1

How to Delete All Chrome Bookmarks

July 11, 2023
export chrome bookmarks

How to Export Chrome Bookmarks

May 17, 2023
how to turn off live caption

How to Turn Off Live Caption on Chrome

May 14, 2023
how to delete saved passwords on chrome

How to Delete Saved Passwords on Chrome

April 19, 2023
Error-Code-409

How to Resolve “Error Code: 409” in Browser

March 7, 2023
HOW-TO-DELETE-FREQUENTLY-VISITED

How to Delete Frequently Visited Sites on Chrome

March 1, 2023
Add A Comment

Leave A Reply Cancel Reply

Latest Posts
how to turn off hardware acceleration

How to Turn Off Hardware Acceleration

September 27, 2023
motherboard chipset

Understanding Motherboard Chipset and Its Importance

September 20, 2023
Naval-Warfare-Games

Best Naval Warfare Games

September 18, 2023
You may also like
printer-not-printing

How to Fix a Printer That’s Not Printing

September 26, 2023
Share Location With Friends and Family

Share Location With Friends and Family (iPhone and Android)

September 18, 2023
how-to-print-without-a-printer

How to Print Without a Printer

September 18, 2023
Recommended
Cookie Clicker Garden Guide

Cookie Clicker Garden Guide to Unlocking Every Seed

September 26, 2021
monitor no signal

Computer Turns On But Monitor Says No Signal (9 Ways To Fix)

November 10, 2022
Facebook Twitter Pinterest
  • Home
  • About Us
  • Our Team
  • Editorial Guidelines
  • Privacy Policy
  • Affiliate Disclosure
© 2023 TechNewsToday, editor@technewstoday.com | Tech Central Pvt. Ltd.

Type above and press Enter to search. Press Esc to cancel.