How to Open Source Code in Chrome

Opensource.com is a community that connects you to open source through news, projects and learning resources. Here at opSource we care deeply about your experience with our site. We have updated our code to serve it to you in ways we think will be most useful and engaging to you, but beyond that we are sharing our code with the world so that others may improve upon it as they see fit.

Now that there’s some code in your project, let’s look at how to create a new source file. This is one of the most common tasks in coding and there are multiple ways to handle it. First, open a new tab by clicking on the hamburger menu (three horizontal lines), and locate the “Create New File” option:

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.
Elements tab in Chrome.

Tip

In Chrome, pressing F12 or Ctrl+Shift+I also brings up the interactive developer tool. This tool provides much more interaction with the source code and CSS settings, allowing users to see how changes in the code affect the web page immediately.

Steps to view source code

  1. Visit the website which you want to view it’s source code.
  2. Click inside the address bar and append view-source: before the url of the website.
  3. Click the send button and the page will load with the source code of the file.

NB: Even though I used Chrome’s mobile browser, the method is the same in all the major browsers.

How to Access the Inspect Element Tool on Chrome?

Nowadays, most browsers have the Inspect Element feature. However, this article will teach you how to use it on Google Chrome.

Refer to our support page for tutorials on how to inspect elements on other browsers like Mozilla Firefox, Opera, and Internet Explorer.

Here’s how to use Inspect Element on Google Chrome:

  1. Open a website on Chrome. We will be using Hostinger’s homepage for this tutorial.
  2. Click on the three vertical dots on Chrome’s top menu bar to open the drop-down menu, then select More tools -> Developer tools.
Selecting Developer tools and More tools.
  1. Alternatively, use the keyboard shortcuts mentioned above or right-click on the web page and choose Inspect to access the Developer tools quickly.
Choosing inspect.
  1. Once the Elements panel appears on your browser window, you can make changes to the page’s source code. Resize the inspector box by dragging its corners for better readability.
The Elements panel where you cann see the page's source code.
  1. By default, the Developer tools will appear on the right side of the browser window. If you wish to change its location or move it to a separate window, click on the three vertical dots at the upper right corner of the panel and choose the preferred Dock Side setting.
Choosing Dock side setting.
  1. To see how the web page appears on mobile devices, click the Toggle device toolbar on the top left corner of the panel. Above the preview, you can change the variables to test how the page performs under a different screen resolution or bandwidth throttling level.
Clicking the Toggle device toolbar.

Inspect Element also lets users change and delete or hide web elements as well as inspect CSS classes. The following sections will provide in-depth information on how to perform those actions.

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.

How to download an entire website source code?

To download a website’s HTML source code, navigate using your favorite browser to the page, and then select SAVE PAGE AS from the FILE menu. You’ll then be prompted to select whether you want to download the whole page (including images) or just the source code.

The download options are common for all browsers.

Web Page, Complete: Downloads the page source code and all images, CSS files, and js script associated with the particular page. All files are saved in a folder. This is useful when you need to download the images together with the HTML code.

Web Page, Single File: Downloads the page in MHTML (short for MIME HTML). This is a form of HTML that includes both the website’s code and any external resources.

Web Page, HTML Only: Downloads the HTML and any other elements (like embedded Java Script Code) found in the body of a page.

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.

Conclusion

This tutorial will teach you how to locate and open the source code of any webpage in Google Chrome.

0 Comments

No Comment.