How to peel a human-shaped tangerine. We delight our loved ones with a beautiful presentation of citrus fruits. The benefits of citrus fruits for the body

Ctrl+U

How can I view the source code of an element?

Right-click on the page element of interest.

Google Chrome: “View element code”

Opera: “Inspect element”

Firefox: “Analyze element”

In other browsers, look for a menu item with a similar meaning.

Hi all!

I especially laid out the whole point at the beginning of the article, for those who are looking for a quick answer.

The information may be known to many, but since I am writing for novice bloggers, web programmers and other prospectors, this reference article is a must-have.

In the future, you will definitely study the source code of pages and individual elements.

Let's look at a specific example of how you can use viewing the source code of a page.

For example, we want to see what keywords are used for a specific page. We go to the web page we are interested in and press Ctrl+U. The source code of this page will open in a separate window or in a separate tab. Press Ctrl+F to search for a code snippet. In this case, we type the word “ keywords". You will be automatically redirected to a piece of code with this meta tag and the searched word will be highlighted.

By analogy, you can search and study other code fragments.

Viewing the entire source code of a page is in most cases not very convenient, so in all browsers it is possible to view the code of an individual element or fragment.

Let's use a specific example of viewing an element's code. For example, let's see if the link has a nofollow attribute. Right-click on the link that interests us and in the drop-down context menu, left-click on the item “View element code” or similar (depending on your browser). Below, in a special window for code analysis, we get something similar.

We see that the link code contains rel=”nofollow” . This means that PR will not “leak” through this link. We will talk about this in more detail in the following articles. Now the important thing is that you now know how to view the source code of the page and the source code of an individual element.

08/11/17 3.3K

All browsers allow you to view the HTML source code of any web page. This article provides information on how to open the source code of a page in the most popular browsers:

Introductory information

When viewing the source code of a web page, it is important to remember that information and code not processed by the server will not be displayed. For example, almost all search engines process information on a server and then display the results on a web page.

This rule applies to all server-side scripts, SSI and program code. Consequently, search engines, forums, polls, chats do not display their code. Copying information from the source code may cause serious errors or send it back to the page.

Microsoft Edge users

To view the source code of a web page in Microsoft Edge, follow the instructions below.
  1. Open Microsoft Edge and go to a web page;
  2. Click the icon " More» in the upper right corner of the screen;
  3. Select F12 Developer Tools ( Developer Tools) from the drop-down menu that appears.

Tip: In Microsoft Edge, the DOM tool provides the ability to interact with source code and CSS settings, allowing you to instantly see how changes to your code affect your web page.

Microsoft Internet Explorer users

How to open the source code of a page in Microsoft Internet Explorer:
  1. Open Internet Explorer and go to a web page;
  2. Select View and Source from the drop-down menu that appears.

Tip: In recent versions of Internet Explorer, pressing F12 brings up the DOM tool. It allows you to instantly see how changes to your code affect your web page.

Mozilla Firefox and Netscape users

To view the source code of a web page in Mozilla Firefox, follow the instructions below.
  1. Open Mozilla Firefox and go to the web page;
  2. Press Alt to bring up the browser menu bar;
  3. Select Tools, Web developer, and then Page Source Page source code).

Tip: In recent versions of the browser, pressing F12 or Ctrl+Shift+I brings up the interactive developer tool. This is something to consider before opening the source code of a Firefox page.

How to view the source section of a page

  1. Select a section of a web page to view the source code;
  2. Right-click on the selected part of the web page and then click View Selection Source ( Show highlight source code).

Tip: Use the Firebug add-on to not only see the source code of the page, but also make the necessary changes. And also see them in the browser at the same moment.

Google Chrome users

To view the source code of a web page in Google Chrome, follow the instructions below.
  1. Open Google Chrome;
  2. Click on the Customize and control icon ( Setup and management) Google Chrome, located in the upper right part of the browser window;
  3. From the drop-down menu that appears, select Additional tools, Developer tools (Developer tools).

Tip: In the latest versions of Google Chrome, pressing F12 or Ctrl+Shift+I also brings up the interactive developer tool.

Apple Safari users

  1. Open Safari and go to your chosen web page;
  2. Select the Develop menu;
  3. Select the Show page source option ( Show page source code).

Opera users

How to open the source code of a page in Opera:
  1. Open Opera and go to a web page;
  2. Click the “Menu" button in the corner of the browser window;
  3. From the developer submenu, select View page source ( View source text).

Tip: If you don't see the "Developer" (or Development) submenu ( Developer), select More tools ( Other tools); Show developer menu ( Show developer menu). Next, click on the menu button again. You will now see a Developer submenu ( Developer).

Browser developers have taken care of the convenience of those who create sites that open in these same browsers, namely webmasters. They have added developer tools to the standard features, with which you can easily open and view the source code of the site page in the browser: HTML, CSS, JavaScript (JS), obtain various useful data about the structure of the site, conduct its technical analysis. In general, see a lot of useful things.

Of course, these tools are used not only by website creators for work, but also by ordinary users, for whom the source code allows them to view various useful data.

From this article you will learn how to view the source code of a website page in a browser (how to open the HTML, CSS, JavaScript code of a website).

How to open a page's source code in a browser

There are two ways to open the source code of a web page in a browser:

  1. Using hot keys;
  2. Open from context menu.

Ctrl+U– a hotkey combination to view the source code of the entire site page in a separate new window. Standard for all browsers: Google Chrome, Opera, Mozilla Firefox, Yandex browser, IE.

You can also enter the developer tools as follows:

In order to quickly find the desired code, word or text on a page, you can use the standard search hotkey combination for all browsers: Ctrl + G.

Video instruction:

View element code | explore element | inspect element

If you suddenly need to view not the entire source code, but display only a separate part of it, some area on the page, then the previous tool will not work. For this purpose, the developer tools have another function, which will be discussed below.

How to view the code of an element on a page:


You can also use keyboard shortcuts to quickly access element inspection.

Hotkeys (buttons):

Google Chrome: Ctrl+Shift+I and Ctrl+Shift+C

Opera: Ctrl+Shift+I and Ctrl+Shift+C

Mozilla Firefox: Ctrl+Shift+I and Ctrl+Shift+C

Yandex browser: Ctrl+Shift+I and Ctrl+Shift+C

After these steps, the source code of the web page will open in the same browser window:

All HTML code will be in the large left column. And CSS styles are on the right.

The advantage of this method, of course, is that the user has the opportunity to change the source code and edit styles. That is, you can edit the styles on the site and see how it will look with certain styles, without having to immediately make changes to the files located on the hosting servers. To change or add program code, you need to double-click on the desired fragment or area. Of course, the code correction in the browser will not be made on the hosting servers. Therefore, in the future, in any case, you will have to copy this code and write it into files.

This video instruction describes in detail and shows how to work with the developer tools:

Just like that, just online, right in your browser, you can view the source code of the site page, get basic data about the HTML and CSS code, change and copy them, without having to download the files of this site to your computer.

By the way, inexperienced Internet users who have changed the page code and expect it to be saved will be disappointed. After all, after refreshing the page, all changes on it will disappear. This is not enough to hack the site :)

How to View Source Code on Android Phone

I would also like to note that the developer tools are available not only in the desktop version of browsers, that is, on computers and laptops. On phones and tablets (Android, iOS) you can also view the source code.

To do this, add the view-source prefix to the URL of the page being inspected:

For example:

view-source:https://site/turbo-rezhim-opera/

Loading...Loading...