How To Open Source Code Google Chrome

Google Chrome (commonly known simply as Chrome) is a freeware web browser developed by Google. It was first released in September 2008, for Microsoft Windows, and was later ported to Linux, macOS, iOS and Android. Google Chrome is also the main component of Chrome OS, where it serves as a platform for running web apps.

If you want to see the code of a particular Chrome Extension, then you will be disappointed to know that it is not possible. If you want to look at the source code anyway, then you can always install and view a Chrome Extension source code using the Chrome browser.

Safari

To view the source of a website on a Mac using Safari, navigate to the page you want and use the following keyboard shortcut: Option+Command+U.

Alternatively, you can right-click anywhere on the page and select “Show Page Source” from the dropdown menu.

Google Chrome

To view the source code of a website on a Mac using Chrome, navigate to the page you want and use the keyboard shortcut: Option+Command+U.

Digital Marketing Training

You can also right-click on the page and select “View Page Source” from the dropdown menu.

View Website Source Code Using Chrome on a Mac

Drag & Drop Your File In Chrome

You can also just drag and drop the HTML file right into a new tab. Chrome will then automatically open the page. 

How To View Source HTML

In case you need to do a little more than just view the page but also view the HTML source code, Chrome allows you to do that as well.

There are a few different ways to do it. The most basic one is to open your HTML file in a new tab in Chrome. Then right click on it, and choose View Page Source from the menu. 

If you’re looking to use a more interactive tool and want to see how the changes you make affect the web page straight away, you can use the developer tool in Chrome. 

To do that, open the HTML file in a new tab. Then click on the three vertical dots icon in the upper right corner of the window. In the drop-down menu, choose More Tools > Developer Tools

On the right side of your screen, go to the Elements tab to see the detailed source code of your web page. 

Why Do You Need to Inspect Web Elements?

If you’re a web developer, you can use Inspect Element to modify the design of a site and see the changes live before implementing them permanently. Doing so saves time and makes communicating with clients more efficient.

Meanwhile, content writers may use the Inspect Element tool to omit sensitive information from a web page before taking a screenshot. This is quicker than using photo editing software.

Having the ability to inspect elements also helps digital marketers with their search engine optimization (SEO) efforts. It can be used to gain insight into the competition’s hidden keywords.

Open An HTML File From SD Storage

Launch the Chrome browser on your phone and open a new tab. Type file:///sdcard/ into the address bar, which will open your SD storage. From there, navigate to the file you want to open and tap to view it. 

Learn To Understand HTML 

Learning little tricks and understanding HTML better can give you more freedom when working with both code and text. One good example is learning how to embed HTML into a Google document, among other things. 

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.

Mapping a Network Resource

First of all you need to understand what is the need of mapping your local files to a network resource? Basically all the files served on the web have a url associated with them. So by using this feature we are assigning a url to our local file.

Whenever a request comes to loads the mapped URL, Google chrome displays the workspace folder contents in place of the network folder contents. It’s as if it’s being served on the web, but the file is modifiable via DevTools and new changes will persist to local file.

To map your website to a local workspace folder: Goto sources panel, right-click or Control+click on a file on the website. Select Map to File System Resource. Select the corresponding file from the list. Give permission to access the file in Google chrome. Reload the page in Chrome.

Change an Element

To change a page element, you need to alter the page’s CSS or HTML source code. This way, you can edit the page text and its style elements, such as font weight, size, and color.

The DOM panel enables simple modification of the text. After opening the Elements box, use the Inspect feature ‒ the cursor icon at the top left of the panel ‒ to highlight the element whose source code you want to change. Then, right-click on the code highlighted within the DOM tree and select Edit as HTML.

Selecting Edit as HTML.

The editor box will expand, allowing you to modify the text. Deselect the element to preview the changes.

A quicker method involves double-clicking the text you want to alter in the DOM panel and replacing it. Text elements are usually encased in quotation marks.

Double-clicking on the text to alter in the DOM panel.

Modifying the style of elements is similar, but you’ll need to use the CSS panel.

Use the Inspect tool to highlight an element. Then, click on the element.style property in the upper part of the CSS panel and add the desired style declarations inside the curly brackets.

In the following example, we added a background color to a text block:

Creating a text block with red background in the element.style section.

If you want to add another style declaration, select the element.style property again. The web inspector will add another empty line for you to fill.

Here, we added a second property that displays the text in italics:

Adding font-style - italics in the element.style section.

Hovering over CSS properties in the CSS panel will reveal a checkbox next to each of them. Uncheck it to omit any styles you don’t want displayed. Alternatively, you can click on a property or a value to replace it.

To use other types of formatting, familiarize yourself with CSS values and properties.

View Source Code on a Mac

Why Do You Need to Inspect Web Elements?

If you’re a web developer, you can use Inspect Element to modify the design of a site and see the changes live before implementing them permanently. Doing so saves time and makes communicating with clients more efficient.

Meanwhile, content writers may use the Inspect Element tool to omit sensitive information from a web page before taking a screenshot. This is quicker than using photo editing software.

Having the ability to inspect elements also helps digital marketers with their search engine optimization (SEO) efforts. It can be used to gain insight into the competition’s hidden keywords.

Add Folder to Workspace

Right-Click in the left panel of Sources and select Add Folder to Workspace or hit Ctrl+Ofor windows/ Cmd+O for Mac. Under “Folders” you can select one or more folder where your source lives, or even a parent folder like your parent folder for all git repositories. The Workspace features is fairly smart when it comes to finding source code files inside.

Hide or Delete an Element

The Developer tools also allow hiding elements from a web page. Using the Hide Element feature, the CSS panel will create a visibility property to hide an element without deleting it.

To do so, begin by opening the Developer Tools and click on the element you wish to hide using the Inspect tool. Then, right-click on the code highlighted in the DOM tree and select Hide Element.

A new visibility property will appear in the CSS panel. Uncheck it to undo the change.

Hiding the element by choosing visibility - hidden.

If you wish to remove an HTML element instead, right-click on the highlighted code and select Delete element. Refreshing the page will restore the deleted code.

Selecting delete element.

Pro Tip

All changes made with the Inspect Element tool can be undone by pressing Ctrl+Z in Windows and Linux or Command+Z in macOS.

Edit HTML, CSS files directly in Chrome

The Workspace feature of Google Chrome’s Developer Tools allows you to edit the source code of any web application directly (edit HTML, CSS files directly in Chrome) and have your changes saved on your local file system and you can see your changes immediately. This technique will work only in recent versions of Chrome Browsers. You don’t need to install any extension in Google Chrome browser to access Chrome’s Developer Tools. It is installed by default in recent version of Google Chrome.

Inspect CSS Classes

Inspecting elements of a web page is also an excellent way to check the code of site elements that you like. You can copy the code to style your site’s elements using CSS classes.

To do this, open the Developer Tools and activate the Inspect tool. Then, hover your cursor over the element you’re interested in. Its basic information like color, font, and margin will appear in a box, and its source code will be highlighted on the DOM panel.

Conclusion

Viewing source code is one of the easiest and most useful things that you can do to learn how web pages are made. Browsers allow you to view source code, but they don’t always let you see what you really want to know. Learning the shows you exactly what’s going on behind the scenes.

0 Comments

No Comment.