How to Open Html Source Code in Google Chrome

Google Chrome is a fast and secure web browser, that incorporates tools such as spellchecking and translation. The browser includes an option to open HTML code of all the pages you visit without any difficulty, which means you can check or alter code through the browser.

In this tutorial, we are going to give you an amazing information about how to open html source code in google chrome. You can follow these steps and enjoy it. Html is a way to give commands to internet browser. Google Chrome works as a browser for all operating systems, so you can use it for any computer or laptops. After reading this article you will be able to find the solution of your problem.

View Source Code in Chrome

So how do you view the source code of a website? Here are the step-by-step instructions to do so using the Google Chrome browser.

  1. Open the Google Chrome web browser (if you do not have Google Chrome installed, this is a free download).
  2. Navigate to the web page you would like to examine.
  3. Right-click the page and look at the menu that appears. From that menu, click View page source.View Page Source in contextual menu for Chrome web browser
  4. The source code for that page will now appear as a new tab in the browser.
  5. Alternatively, you can also use the keyboard shortcuts of Ctrl+U on a PC to open a window with a site’s source code displayed. On a Mac, this shortcut is Command+Option+U.
Person selecting View Page Source on a web page

Google Chrome

To view the source code of a web page in Google Chrome, use any of the following methods.

View source code only

Method one

To view only the source code, press Ctrl+U on your computer’s keyboard.

Method two

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

View page source in Chrome.

View page source with elements

  1. Open Chrome and navigate the web page whose source code you’d like to view.
  2. Click the Customize and control Google Chrome Chrome settings icon icon in the upper-right corner of the browser window.
  3. From the drop-down menu that appears, select More tools, then select Developer tools.
  4. Click the Elements tab in the top-left corner of the new section that appears at the bottom of the screen.

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.

Mozilla Firefox

To view the source code of a web page in Mozilla Firefox, use any of the following methods.

View source code only

Method one

To view only the source code, press Ctrl+U on your computer’s keyboard.

Method two

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

View page source in Firefox.

View page source with elements

  1. Open Firefox and navigate the web page whose source code you’d like to view.
  2. Click the Menu Firefox Menu Icon icon in the top-right corner of the screen.
  3. Select Web Developer in the drop-down menu, then select Toggle Tools from the expanded menu.
  4. Click the Inspector tab in the top-left corner of the section that appears at the bottom of the screen.

Use Chrome’s Developer Tools

In addition to the simple View page source ability that Google Chrome offers, you can also take advantage of their excellent Developer Tools to dig even deeper into a site. These tools will allow you not only to see the HTML, but also the CSS that applies to view elements in that HTML document.

To use Chrome’s developer tools:

  1. Open Google Chrome.
  2. Navigate to the web page you would like to examine.
  3. Select the three-dot menu in the upper-right corner of the browser window.
  1. From the menu, hover over More tools and then choose Developer tools in the menu that appears.Developer tools menu item in Google Chrome
  2. A window will open that shows the HTML source code on the left of the pane and the related CSS on the right.
  3. Alternatively, if you right-click an element in a web page and select Inspect from the menu that appears, Chrome’s developer tools will pop up and highlight the specific part you chose in the HTML with the corresponding CSS shown to the right. It is super helpful if you want to learn more about a particular piece of a site.

Microsoft Edge

To view the source code of a web page in Microsoft Edge, use any of the following methods.

View source code only

Method one

To view only the source code, press Ctrl+U on your computer’s keyboard.

Method two

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

View page source selector in Edge.

View page source with elements

  1. Open Microsoft Edge and navigate the web page whose source code you’d like to view.
  2. Click the Settings and more Edge more icon icon in the upper-right corner of the screen.
  3. Move your mouse over More tools in the drop-down menu, and select Developer tools from the expanded menu.
  4. Click the Elements tab at the top of the window that appears on the right side of the screen.

Is Viewing Source Code Legal?

Over the years, we have had many new web designers question whether it is acceptable to view a site’s source code and use it for their education and ultimately for the work that they do. While copying a site’s code wholesale and passing it off as your own on a website is certainly not acceptable, using that code as a springboard to learn from is actually how many advancements are made in this industry.

As we mentioned at the start of this article, you would be hard-pressed to find a working web professional today who has not learned something by viewing a site’s source! Yes, seeing a site’s source code is legal. Using that code as a resource to build something similar is also safe. Taking code as-is and passing it off as your work is where you start to encounter problems.  

In the end, web professionals learn from each other and often improve upon the work that they see and are inspired by, so do not hesitate to view a site’s source code and use it as a learning tool.

Conclusion

Doing some coding? Here is an easy way to open the source code of a web page in Google Chrome.

0 Comments

No Comment.