How To Open Source Code On Google Chrome

This article explains how to access a website’s HTML source code in the Google Chrome web browser, as well as access and use Chrome’s developer tools. Viewing a site’s source code is an excellent way for beginners to learn HTML.

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.

Hilary Allison / Lifewire 

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.
  4. From the menu, hover over More tools and then choose Developer tools in the menu that appears.Developer tools menu item in Google Chrome
  5. A window will open that shows the HTML source code on the left of the pane and the related CSS on the right.
  6. 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.

How to Inspect an Element on a Mac

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.

Similar Posts

0 Comments

No Comment.