How to view the source code of the page and the code of the item. How to change the page code in Google Chrome

Each Internet user has its favorite sites on which he spends a long time. And only the lazy did not think of seeing how it was created and what it consists of. Answer all these questions will not work, as there are many ways to create a site, but to see those teams and codes from which it consists - it is possible and accessible to everyone.

Another question is whether a person will understand who is not engaged in programming something of those characters that make up the code. But from examples that will be lower than any user Google Chrome. Can watch individual elements of sites.

How to view the source code of the HTML pages in the browser from Google

What you could see the page code in Chrome must go to the site you are interested in and perform the following actions:

Two of these items differ among themselves with their functionality and information on the user, programmer or hacker.

What is the difference between the page code and just the "View Code" command

Viewing each of these functions can be written separate item. For programmers, this difference is essential and they understand in what cases you need to use "View Code", and in what "page view" in the Google Chrome browser.

But explaining for the regular user you can divide these functions for the following purposes:

"View the page code" is only necessary to see the main combination of the page. Basically, this is the structure of the site (without additional models in the form of CSS files and other addlections that remained in the site creator folder). This structure not suitable for creating own page By "copying - insert", but it will allow you to see what the programmer did and in what sequence so that the site in the Google Chrome browser had such an external design.
"View code" displays a detailed structure with allocating all areas that are affected on the page. If you bring to a specific list code - it will allocate an item on the site to which it belongs.
Viewing the page code opens in a separate browser without the ability to edit it. That is, it is suitable only for copying and reading the site code. But this is no less useful feature.
"View code" change and you can edit any item as it will be convenient for you. Of course - these all changes will "live" until the page is updated, but sometimes it is fun to climb the settings and simply understand why it is necessary, and what will happen if it is changed. You should not assume that such actions you hurt yourself or site - these changes are valid only in the code of your Google Chrome and does not go online.

Consider the question of how to see the code of the element

If you really answer such a question, then only an option as an example. Because for one article to become a person who will understand this topic (web developer) is very difficult, but to show the example to be exhausted - to make much easier.

The functionality of the element code is very wide, so we take one of the words on the Google Chrome browser site. We wished to consider which keywords (In the code, it will be registered as "Keywords") were used for our site. To do this, perform the following algorithm:

Other ways to use this function in Google Chrome browser

In general, continuing to respond to the question of how to see the code of the item and why it is needed, it should be transferred to its functions. Namely thanks to the ability to see the code of the element of any site in the Google Chrome browser, we can:

See the structure of the site starting from HEAD ("Site Cap") and ending end (End command of any program);
View all site functions, namely: links to other sites, additional modules from external sites and the presence of built-in meters to collect different information;
Find out whether copying from the site is prohibited or not;
In the code, all links to other site pages will be recorded, as well as their design and subsequent actions after clicking on them.

This is not a finite list. But it should be reminded that without special knowledge - "read" code google Pages Chrome is almost impossible and the resulting data is practically not needed by the usual user.

Item "View Item Code" does not work

Should immediately say - every site will be with open access To the codes of elements. That is, even the most popular and expensive sites will be open to view their code. Therefore, in case the item in the Google Chrome browser is not active or issued an error has the following possible reasons:

User profile is damaged;
The presence of malicious software on the computer;
Blocking with a specific extension to increase productivity (even this may be).

Correct the damaged user profile

To create new profileYou must remove the old one from your computer. To do this, carry out the following:

Close Google Chrome and launch the built-in browser Windows Explorer.
We enter the following command to the address bar:% LocalappData% \\ Google \\ Chrome \\ User Data \\.
When the directory opens, we are looking for the folder "Default" and add to its name "Backup" so that the following is: "Backup Default".
Now after the new launch of the browser chrome, a new profile will be created.

Remove the malicious software or its remnants

If a new profile has not opened access to the page of the page element and we still see the error, the following steps:

Open command line Windows ("Run") and enter the "CMD" command there.
Enter the following command in the line: RD / S / Q "% WINDIR% \\ System32 \\ GroupPolicyusers".
After confirming the action, drive this: RD / S / Q "% WINDIR% \\ System32 \\ Grouppolicy".
Now "GPUPDATE / FORCE" (without pitchers).

If everything was done correctly, then after reboot google Computer Chrome will open the code of the elements and the working capacity of the browser will normally.

For a long time for me the option "Show source Pages "was useless and uninteresting. While the study of HTML on Codecademy and the layout of its own sites has not turned into my new passion. The question arose: where to find real case cases and borrow interesting solutions for your "piggy bank"? The answer was unexpectedly simple, like all ingenious: View the source code of the page in Google Chrome! I share with you my modest finds.

What is the source code of the page

If you, like me, just do the first steps in HTML programming, will not be unnecessary to find out what the source code of the page.

Source code, it is HTML page code - Text in Hyper Text Markup Language (HTML). It includes the content of the page (text, table) and tags. The latter play the role of the instruction for the browser: how to display content, what kind of formatting is to use where to insert a hyperlink or media file. Well, for us, novice programmers source code is the best training ground: we find an interesting site and spy, we save, we use successful fragments. How?

How to view the source code in the Google Chrome browser page

We find the page you like. For example, I was interested in the execution of the site menu. Open source code in Google Chrome browser in three ways:

Click on icon menu In the upper right corner of the browser and choose the "Additional Tools" item. Among others have the "View source code" option. Admit rarely using this method: a lot of unnecessary movements. It can be done even easier.
Press the key combination Ctrl + U. - the new window opens with the source code;
For fans context menu: Right-click on the page and select the Page Code option.

With a task to watch HTML page code in the browser coped. Go to the most interesting stage.

How to edit and save the source code

To learn how to create sites, it is not enough to read someone else's HTML code. You need to play with it, experiment, make changes and check the result. You can begin to start with a compilation of several successful samples. How to edit and save the source code?

Option 1. "Manual"

After we opened the source code of the page, call the context menu and select the "Save As" option and save the file to hDD. Edit the file in notepad or notepad, save the changes and open through the browser. The results of our changes (successful and not very) will be praised in the browser window.

Option 2. For pros

When you "play" with the source code every day, the Process "Save - Open - Change - Save - Check" tires. For myself, I have found a solution in the form of a plug-in for Google Chrome - Firebug Lite. It allows you to edit and save the source code, without leaving the browser window.

1 vote

Good day, dear readers of my blog. It happens on the site some beautiful chip and begins to torment the question, how the creator achieved such an interesting effect.

It turns out that it is quite simple to find the answer. And if you have some skills, you can choose a lot of such chips and in a short time to create your own unique site.

Today we will talk about how to open the page code, a certain element and learn to use this skill for yourself.

Basic knowledge of code

My site is designed for newbies and first I would like to tell the sites and code in the two words.

To draw a picture, then cut it into small parts, write code, thanks to which the browser will bring all the elements to a single whole. It seems that everything is very difficult? Not at all, and it is not worth grieving about this.

Quality sites are created this way. Want - Close to this case and study, no desire - no one is able to force you.

I will only say one thing ... There is nothing more pleasant than seeing the incomprehensible words written by you are converted into a single whole and come to life: links work, buttons move, pictures are moving, text crawls. I think I know how Viktor Frankenstein felt.

When you begin to comprehend a secret language and see that everything is actually much simpler than it seemed initially you can't not believe in your own strength and brain opportunities. It is very cool.

How are sites made? Ideally, first. He just draws a picture. For example, as shown in the figure below. While it is just an image, a photo. No references do not work, when you press you do not go anywhere, the search is not carried out.

For this figure. Look at the screenshot below. You may seem like a ridiculous and very complex set of characters. In fact, everything is not so difficult, there is a certain algorithm.

There are only about 150 tags and each of them is responsible for a certain action: link, transfer, highlighting fat, color, heading, and so on. It's not so difficult to deal with them, if there is a desire and not pity the time.

Thanks to the knowledge of these attributes, you can solve almost any task. But the ways to achieve the goal each developer finds its own.

Experienced creators will immediately see how to achieve results, and others have to think, look for an answer in articles or in the initial code of competitors. They simply take the necessary part on a third-party site and edit for themselves. This significantly reduces the work process.

A little later, I will show you a specific example.

View code

So, let's first show you how to act if you need to learn someone else's HTML. Then we will consider in more detail all other questions.

The best way

The method that I will describe the first is a bit complicated for newbies, but as an acquaintance - will go, read. Open the page and click on the right mouse button. Choose the item "Save As ..."

Save the webpage completely. As you can see on the screenshot, I have already downloaded everything in advance. Here we have two folders.

There is everything you need. Each element. If you understand this, you can quickly get everything you need. But, such a task is increasingly becoming impracticable. Download is not performed. What to do if it is forbidden to copy the page?

This is Google Chrome

As you probably could notice, I most often use Google Chrome and find out someone else's code in this browser is easier than simple. As in principle, both in any other. The scheme will not be what is similar, but identical. We open the page whose code we want to know, and click anywhere right mouse button. In the click of the page that appears, click the page code.

The new window will open a sheet of code in which it is rather difficult to understand a newcomer. But, do not be afraid ahead of time.

If you need to know the code of only one element, it is enough to bring on it with the mouse and right-click. Select another chromium function: "View the code code".

For example, I can be interested in how the logo is made when using a picture or programming language? After all, you can draw a square when cSS help. Many specialists advise as much information as possible to register with the code. How do you work on popular sites?

So appeared the necessary information. From above HTML, at the bottom of CSS. These are two languages. The first is responsible for the text component, and the second for the design. If there were no CSS, then you would have to prescribe color each time, font size. For each page, it is very long. But if there were no HTML, we would not have texts. Rudely explained, but in general, everything is so.

By the way, if you are interested in how it is arranged here, you can look at the bottom of the link to the picture. So you answer.

Mozilla Firefox.

If you like to work in a mazile, everything will be just too. Open the page and click on the right mouse button. "Page source code" If you want to see all the entire code.

When you hover on any item, it is possible to open its code.

Here the data is displayed at the bottom of the screen, and otherwise everything is also.

Yandex browser

In Yandex browser, everything is just as in the previous two versions, open the page, the right mouse key, see the page code.

We bring the cursor to the item if we want to know its code.

It is displayed here exactly as in chrome.

Opera

Well, finally, Opera.

By the way, perhaps you noticed that it was not necessary to use the mouse. To open the code there is a quick key combination and for all browsers it is the same: Ctrl + U..

For items: Ctrl + Shift + C.

This is how the result looks like.

It will be interested in beginners

And now see how everything works. Find you a site and you really like some kind of item. For example, this one. How to open the code of the item you already know.

Now copy it.

I use, insert this code into a new HTML file, in the Body tag (body in English).

Now let's see how it will all look in the browser.

Ready. In order for the text to be aligned along the edges and acquired a greenish color, you need to connect to this document CSS and copy another code from the site from which we toried this.

Now I will not do this. It needs more time: and mine, and yours. I think that all the details I will describe in my future publications. Subscribe to the newsletter and learn about the appearance of the article first.

If you have no strength to endure, and you want to learn more about HTML and CSS now, I can recommend free training courses by tradition.

Here are 33 lessons who will allow you to master HTML - « Free course by html " .

And here complete information about CSS - "Free CSS Course (45 Video Tutorials!)" .

Now you know a little more. I wish you success in your endeavors. To new meetings!

Probability look into the initial the code Web pages The resulting browser in the result of the server is actually actually in every Internet browser. Access to the relevant team is arranged approximately identical, but there are significant differences in what method and in what form you will be presented is the initial the code .

Instruction

1. IN browser Mozilla. Firefox Open the "View" section in the menu and click the Benefit the code pages " There is also the same item in the context menu that occurs if you right-click the text pages . Allowed to apply the Ctrl + U keys combination. Mozilla Firefox. It does not use external programs - the initial the code pages The syntax highlight will be opened in a separate browser window.

2. In the observer Internet Explorer. Click the File section menu and select Edit in Notepad. Instead of the name Notepad, a different program that you assigned in the browser settings to view the initial the code but. Click pages Right-click the context menu, in which there is also an item allowing to open the initial the code pages in external program - "View HTML the code but".

3. IN browser Opera. Open the menu, go to the "Page" section and you will probably prefer to the "Method of Development" subsection the code »Either item" Primary the code Freum. Such a choice is prescribed burning ctrl keys + U and Ctrl + SHIFT + U respectively. In the context menu, tied to click pages right-click, also there is an item "initial the code " Opera opens the source code pages In the external program, which is assigned to the OS or in the browser settings for editing HTML files.

4. The Google Chrome browser without any doubt has the best initial viewing the code but. By right-clicking page, you may prefer to "view the code but pages "And then the syntax backlit source will be opened on a separate tab. And you can prefer in the same menu of the string "View the code and the element "and the browser in the same tab will open two additional frames in which you can inspect HTML and CSS the code of any element pages . The browser will respond to the movement of the cursor on the rows the code a, highlighting the items on the page corresponding to this section of HTML the code but.

5. In the Apple Safari browser, expand the "View" section and select the "View HTML" string the code but". In the menu that occurs right-click right-click pages The corresponding point is called "View Source". This action is prescribed by the burning keys Ctrl + Alt + U. Initial the code Opens in a separate browser window.

We released a new book "Content Marketing in social networks: How to sit in the head of subscribers and fall in love with their brand. "

The source code of the site is a combination of HTML markup, CSS styles and javaScript scriptsthat the browser receives from the web server.

More video on our channel - Learn Internet Marketing with Semantica

It can be compared with a set of teams that commander gives soldiers. Imagine the audience do not see and do not hear the head. From their point of view, the military independently perform actions. In our case, the commander is a browser, the commands are the source code, and the marching soldiers are the end result.

A site is stored on a web server that sends a page on user request. The query is to enter the URL in the address bar, click on the link or click on the Send Data button in the form. No matter what language web pages are written, whether they include software. The end result of any server algorithm is a set of html tags and text.
The source code of the page is a data set that includes:

hTML markup;
stylized table or link to file;
programs written in JavaScript or links to files with code.

These three sections are processed by a browser. For the server, this is just the text you want to send in response to the request.

Why do we need to learn the source code

All we will see, we will be able to analyze and apply to solve those or other tasks that arise during work with the site, especially when optimizing it. Viewing the source code, we can:

See the meta tags of your or someone else's site for their analysis.
See the presence or absence of some items on the site: counters, identification codes in various systemsdefined scripts and other things.
Find out the parameters of the elements: dimensions, colors, fonts.
Find a way to photos and other items located on the page.
Examine links from the page.
Find problems with the code that interfere with the site optimization process: unbearable in separate files Styles, scripts, invalid code.

These are the main features, but in fact, can read the code, you can learn about the page much more.

How to view the source code of the site

Fully in the form in which it is posted on the server, it will not be possible to do this from the browser. But you can see all the markup by clicking on the right mouse button on the page. Hereinafter, on the example of Google Chrome.

Select the option "View page code" and get full listing in a separate tab.

This is just a text that will have to analyze to understand. But you can get the interactive code using the developer tools.

How to find the source code of the site page

Click on the menu icon in the browser. Most often, it is on the right and has the appearance of three points or stripes.

In the Advanced Tools section, choose "Developer's Tools".

A window will open, which displays the active status of the code. This means that when the mouse click on the markup, the element style is displayed, and the selected blocks will be highlighted on the page.

In the Source tab, you can view the contents of some files: scripts, fonts, images.

In the SECURITY tab, a test certificate is available.

The Audits tab will help check the resource hosting.

If the location of the panel is uncomfortable, you can press three points and change it by selecting the desired item.

How to see meta tags

Each HTML document includes structure tags. Here is some of them:

HTML is the entire document.
Head - section of service headers.
Title - page title (displayed on the tab).
Body - body of the document.
H1-H6 - page text headers.
Article - article.
Section - section.
Menu - Menu.
Div - block.
Span - line.
P - paragraph.
Table - Table.

Elements are intended for logical separation of sections on the page, if necessary, they are drawn up with styles. They include a text that is somehow visible on the page. But the Head tag is present information. For its instructions, meta tags serve. All that they are written in them is intended for server and search engines.

Their contents cannot be recognized by another way.

Pay attention to the LINK tag. With it, references to external plug-in files are specified. If you wish, you can see the contents and save on the disk. To do this, hover the pointer to the address and click PCM. Select Open in New Tab.

The new tab opens specified filewhich can be viewed or saved.

How to view the source code for debugging the script

In this case, it is convenient to open the page on the local machine. If you only need to fix markup, styles and scripts, then it can be done directly from the folder. HTML code is viewed in the same way. But the JavaScript code errors can be seen in the "Console" tab. Here shows the error description and the line number in which it originated.

The syntax can be seen directly in the code. To do this, the Source tab is designed.

How to see the specific item code

For large pages with a large number of items it is difficult to find the desired code in the entire markup. In this case, you should use a special context menu command. Waving the mouse on the fragment and press the PCM. Select the "View Code" command.

The same window opens, but with focusing on the selected object.

Summary

We told what the source code of the page. It is enough to master the elementary knowledge of HTML and CSS, and using convenient developer tools, you can debug your own HTML documents.

Viewing the resource code on the Internet will allow you to learn not only on your own experience, but also use real working examples. And for SEO specialists will be useful meta-tags, information in which it can say about the site a lot.