Chrome Android View page code. Developer tools and source code – what is the difference

How to view the source html web page code

All Internet browsers allow visitors to view the source HTML code of any web page that they visit. In this article you will find information about various ways to view the source code of the web page in the main browsers.

When viewing the source code of the web page, it should be understood that the information and code that are processed by the server will not be displayed.

For example, the WordPress website first forms a page on the server using the PHP programming language, and then sends the formed page to the site visitor. In other words, you can view the code of the finished web page, but you can’t view the source code PHP.

This rule applies to all server scripts, SSI and software code. Therefore, you cannot view the source code of scripts used in search engines, forums, polls, chats and so on.

But html code, CSS files, as well as JavaScript code, you can view, and, right in the browser.

View source code in Google Chrome

To view the source code of the web page in Google Chrome, follow the following actions.

Click Ctrl U on your computer keyboard.

Click the empty part of the web page with the right mouse button and select “View page code” in a pop-up menu.

And then a new tab will open, in which you can see the HTML page code.

You can also view the elements code. To do this, click Ctrlshifti, or use the context menu. As a result, you will open a window in which you can see the code of each individual element on the web page, including the element that is responsible for it in the CSS styles file.

Why do I need the source code of the site?

You think that if you are not a programmer or a layoutor, then you are unlikely to need a code? In fact, he can help in different situations. The code can be useful:

• SEO specialists. It is not always possible to analyze the page and find out if there are any problems with it. For example, to find out the description page, you can not use special plugins and other means. just open the source code, and the description will be before your eyes. Similarly, you can see the page title, find out if Yandex is connected.Metric and other scripts.
• For a deeper analysis of competitors. To see what ways the site is moving, we can through the code: keywords, meta-tags and so on-all this is available for an ordinary user.
• Web designers. We are talking about competition again, but not only. When the designer creates his own site, he often addresses various resources to see how certain elements are located. We can find out all this on any site: what is the indentation of this button, what size it is, how many pixels that photo and so on.
• For a better understanding of code. Having studied the basics of the HTML code and CSS-style, you can understand how your layoutor works and what elements should be optimized.

A few more features when viewing the page code: unloading pictures with the original size, viewing the site in adaptive mode, the ability to change the contents of the web page. The latter operates in local mode. the changes will be applied only on the current PC until the page is updated.

How to find out the site code

Before proceeding to viewing the site code, let’s first figure out what includes the code of any web resource. As a rule, this is a list of numbered lines with information about a particular element of the site. If you open the code of the main page of TimeWeb, then we will see that the title of the document is set in the fourth line:

As you can see, everything is logical and clear here.

Read more about what the site code is, we will talk in the next section, but for now let’s consider the main ways to view it.

Function “View code”

Open a page whose code needs to be viewed, and click on any area with the right mouse button. In the displayed menu, select “View code”. You can also use the Ctrlshifti key combination.

As a result, we find ourselves in the browser inspector-an additional window appears on the screen where the page code is located on top, and from below it is CSS-style.

Please note that the launch of the developer tool was performed in Google Chrome. In another browser, the name of the launch button may vary.

“View page code”

If in the previous case we could open the entire summage of the site, now only the HTML code will be available to us. To see it, we find an empty field on the site and click on it with the right mouse button, then select “View page code” (you can use the Ctrlu key combination). If you click on the element of the site, then the “View page Code” button will be absent.

After that, we will redirect us to a new page with all the source code:

Here we can also see the entire contents of the page, but we will not be able to find out CSS and change the data.

View the code of the element

A more interesting tool is to view the element code or as it is also called the “developer tools”. You can also start it in several ways:

• Using the functional key F12.
• Using hot keys Ctrl Shift I.
• Through the context menu of the mouse. the last item in the list.

No matter what way the function is launched, the result will be one. The panel with many buttons, tabs and settings will open on the right, part of the code that you see on the screen is displayed in its window.

By default, the elements tab opens. But you can switch to the console or see the structure of folders on the server, as well as files stored there. In fact, the developer tools provide enormous opportunities. And in one article it is simply impossible to describe everything. Let us dwell on some opportunities that can be done to an inexperienced user.

How to edit and save the source code

To edit some element on the site, open the developer tools and select it with a mouse cursor. For example, you need to change the heading of the article:

• Select the text, on the selected element, press the right mouse key and select “View the code”.
• In the right panel, the desired element will be highlighted. Here, if it is hidden in the nested structure, click on a small arrow, turn the branch and edit the text.
• As soon as you move Focus to another place of the heading code change.

Now you can close the developer tools and take a screenshot of the page with already fixed elements.

If you need to copy a text that is not copied from the site in normal mode, then perform the right click of the mouse on this site again and select “view the code”. Here is the text, you can safely select and copy to the clipboard.

You can completely remove entire blocks of text, pictures and various elements. The site will change right in front of your eyes, and adapting automatically adjusts the remaining visible elements so that the structure does not break.

Other developer tools

At the bottom of the developer panel, you can see the styles of elements, sizes and indentation.

If you need to find any element on the site, click the Ctrl F key combination and in the search line on the site enter a request. Any word or tag. All coincidences will be highlighted yellow, and you can easily calculate where this or that object is located and how it is realized.

In addition to the usual viewing, you can check the page for adaptation. The button is located in the upper left corner of the developer panel. It shows a tablet and a phone. You can also start this tool using the Ctrl Shift M key combination. Here you can manually set the width and height of the screen or select from the list of existing devices, and see how the site will be displayed on the iPhone, iPad or Galaxy smartphone.

Android

• In the address bar, write down the View-Source line in front of the domain: Example: View-Source: Mycrib.ru
• Use VT VIEW Source applications with Play Market.

This is a useful function to optimize the site on the phone. The option of viewing code in the mobile version can be found in Google Chrome. To do this, press Ctrl Shift I, and then select the mobile phone icon at the top of the tulbar or use the hot keys of Ctrl Shift M. Next, you can choose a page display for some mobile phones models and in various permits.

What is it

Page code is a set of various attributes used by the browser. Thanks to them, we see the contents of the page: texts, tables, images, video clips and much more. For example, Google page code.ru looks as follows:

This method allows developers to quickly see a mistake if it is available. In addition, if necessary, we can copy the HTML code of any site and create a similar page on our computer. Next, we will consider how you can get into a window with a code in two ways.

Through a computer

The desktop version of the browser allows each user to see the page code of any site. Take Apple website for example.COM and see how you can find out the HTML code of this page.

View page code

Open page code in Google Chrome:

• We go to the page of which we need to look at the code, and in any field, click the right mouse button. In the displayed menu, click on the “View page code” button.

We can also use the Ctrlu key combination. this is an alternative way to view the page code in Google Chrome. In this case, we will also get to the page launched above.

Developer tools

Developer tools are a special window in which we can not only look at the HTML dick, but also check the neglect of scripts, watch CSS styles, pictures and much more.

• Ready! Now we are in the tools of the developer where you can see the page code. By default, this window is located at the bottom of the browser, but it can be in a different place, for example, as in the figure below. In the “Elements” section, we can view the entire code responsible for the structure of the studied web page.

We can also get to this section through the click of the right button along the empty field of the page, as we did in the previous section.

In addition, using the Ctrlshifti key combination, or the F12 button, we will again get into this section.

How to open the source code of the google browser page Chrome

If you need to see what your browser code looks like, follow this instructions.

On the computer

• Open the browser and click with the right button for free space.
• A context menu will appear. In it, select the line “View page code”.
• A new tab will open, in which the elements in the PHP language will be spelled out in full.
• To decipher this information, click PKM again and now click “View the Code”. The screen will be divided into two parts, in the right there will be information about the page elements. By pressing each of them, you can consider the inscriptions and copy them to apply the same element in your product. You can also make changes to the code, then the site will be displayed in your observer as you want until it update.

By the way, the encryption viewing option is called by pressing the F12 key.

You can also open the settings (three points in the upper right corner of the screen), click on the “Additional Tools” tab and select the “Developer Tools” section.

On a mobile phone

There is no similar functionality in the mobile version of the browser. VT VT VIEW Source utility will help you see the necessary data. You can download it for free from the Google Play app store. With its help, you can significantly expand the basic functionality of the mobile browser and work with it similarly to a computer version.

View the code of the element and other functionality

In the “View Code” mode, you can click using a shooter cursor to choose any fragment of interest and see how it was created. You can also copy it and insert it into your code, as well as change the required parameters for displaying information for your own convenience.

Having the opportunity to view the “Simit” pages, you can replenish your knowledge if you are fond of programming, copying sites that is very useful for creating your products and adopting the experience of other developers. Also, with the help of such an option, you can adapt the browser to your needs and significantly expand the capabilities of the program.

If you have questions or have complaints left. please let us know

Ask a Question

The item “View the Code of the Element” does not work

It should be said right away. each site will be open to access to the codes of elements. That is, even the most popular and expensive sites will be open to view their code. Therefore, in the event that the item in the Google Chrome browser is not active or gives the error the following possible reasons:

• The user profile is damaged;
• The presence of malicious software on the computer;
• Blocking by a certain extension to increase performance (even this can be).

Correct the damaged user profile

To create a new profile, you need to remove the old one from your computer. To do this, we perform the following:

• Close Google Chrome and start the built.in Windows Explorer browser.
• Enter the following command: %Localppdata %Googlechromeuser Data.
• When the catalog opens, we are looking for the Default folder and add to its name “Backup” to turn out the following: “Backup Default”.
• Now, after the new launch of the browser chrome, a new profile will be created.

How to see the source code

Our experienced team of editors and researchers who checked it for accuracy and completeness participated in the creation of this article.

Wikihow content managers team carefully monitors the work of editors to guarantee compliance with each article with our high quality standards.

The number of views of this article: 128 717.

From this article you will learn how to view the source code, that is, the language of programming the web page, in most popular browsers. Keep in mind that in the mobile versions of browsers (except for the mobile version of Safari), the source code of the page cannot be viewed.

Open the web browser. The process of viewing the source code is the same for Chrome, Firefox, Microsoft Edge and Internet Explorer.

• In Chrome, click on the “View Page Code”, in Firefox for “Source Page Code”, in Edge and Internet Explorer on “View Code”.
• You can also press Ctrl U (Windows) or ⌥ Option ⌘ Command U (Mac OS X) to display the source code.

Click on Safari. This option is located in the upper left side of the menu panel. The drop.down menu will open.

Put the flag with “show the menu menu in the menu line”. This option is located at the bottom of the “Settings” window. The menu line “Development” will display the menu line.

• In mobile versions of browsers, the original page code cannot be viewed. This does not apply to Safari, the laying of which can be saved on iPhone or iPad, and then view the source code.

How to view the element code in Chrome

Our experienced team of editors and researchers who checked it for accuracy and completeness participated in the creation of this article.

Wikihow content managers team carefully monitors the work of editors to guarantee compliance with each article with our high quality standards.

Number of views of this article: 23 296.

From this article you will learn how in the computer version of Google Chrome to view the original HTML code of the visual element on any web page.

Run the Google Chrome browser on a computer. Click on a multi.colored round icon with a blue center. It is located in the program “Program” (Mac) or in the “Start” menu (Windows).

Click on the icon in the form of three points located vertically. You will find it at the address line in the upper right corner of the browser window. The menu will open.

Pull the mouse pointer to the element on the developer panel. This element will be highlighted on a web page.

Click with the right button on the element on the web page, the code of which must be viewed. The menu will open.