How to open the source code of the page. How to view the source code of the page and the code of the element

Someone at first it will seem that this is not the necessary tool, but the view of the entire HTML site code is great for searching in the code of necessary items, it can be links, tags, meta-tags, attributes and other elements.

A combination of hot keys + Open the search box, in the Chrome browser it appears on the right:

Figure 3. Code Search Site

After you are prompted to search form form, the screen will move to the first found element, using the arrows you can move between them and select the necessary:

Figure 4. Search by HTML site code

Instruction 2: How to view and edit HTML and CSS site code in Google Chrome browser

Now Sameya an important partin which I will show how you can edit HTML and CSS site code in the browser. After that transfer changes to the browser.

Here is a useful tool is always available in your browser, experiment with other commands that you will facilitate the editing of the site.

" The same item is in context menuwhich if right-click text pages. You can use a combination keys Ctrl. + U. Mozilla Firefox. It does not use external programs - the original the code pages The syntax highlight will be opened in a separate browser window.

In the observer Internet Explorer. Click the File section menu and select Edit in Notepad. Instead of the name notepad name, another may be written, you are assigned in the browser settings to view the source the codebut. Click pages The right mouse button drops the context menu, in which there is also an item that allows you to open the source the code pages in external program - "View HTML the codebut".

IN browser Opera. Open the menu, go to the "Page" section and you will have the opportunity to choose the "Source Development" subsection the code"Or point" Source the code Freum. This selection is assigned hot keys Ctrl + U and Ctrl + Shift + U, respectively. In the context menu, tied to click pages right-click, also there is an item "Source the code" Opera source code pages In the external program, which is assigned to OS or in the browser settings for editing HTML files.

The Google Chrome browser without any doubt has the best organization of viewing source the codebut. By right-click, you can select "View the codebut pages"And then the syntax backlit source will be opened on a separate tab. Can you choose in the same menu string "View the codeand the element "and in the same tab will open two additional frames in which you can inspect HTML and CSS the code Element pages. The browser will respond to the movement of the cursor on the rows the codea, highlighting the items on the page corresponding to this section of HTML the codebut.

So today we will consider several useful funds for Web Wizards, who facilitate life when laying the site. Let's start with the console for Web Masters in Google Chrome. And we will go on questions that most often arise from the Web-master during the site layout.

In order to get into the console, open your site in Google Chrome, right-click anywhere in the web page, and select "View page code" in the contextual drop-down menu, or on a specific item for the study by selecting "View Code element. "

At the top, you will be listed several tabs. Today we will talk about the "Elements" tab , on which the elements of the web page with illuminated tags, properties, the selection of the nesting elements, representation of the element hierarchy in the DOM tree (tip at the bottom, from the root parent to the current under study), the ability to edit elements, the list of their properties, consider the search by items as well We will get acquained with watching CSS styles related to elements, etc.

How to view all styles related to a specific element? Which one is applied now? What files are they located?

So, there is nothing easier! Open your Google Chrome browser, open our site - the source of the questions click on the desired element with the right mouse button, if it is visible in the context of the page, and select the item "View of the Item Code" in the context menu.

Below, we have a console with a highlighted tab of the left "Elements" and all connected with the element styles on the right, where: Computed Styles. - These are common "summary" styles that were assigned to an element from CSS rules and user browser settings (its environment environment), and the tab is minimized.

But we are interested in the Styles tab, deployed under it, in which all styles assigned to the item, as well as files, where these rules are specified for this item by type, ID, class, name, property, attribute, etc. . At the same time, if the CSS rule is crossed, it means it was overridden earlier / further (which makes it easy to track which of CSS rules is a priority and applies in this case to item).

At the bottom of the console there is a string that shows the element in the document hierarchy, it easily allows you to view the entire list of parent elements from the root to the selected item. Something like "bread crumbs."

HTML tag is not visible in the context of the page? Or need to find all tags, for example, on a specific class, name, property, type?

Open the site in Google Chrome, click right-click, call the context menu, select « View Page Code » . Click the keyboard key "Ctrl + F" at the same time, we enter the phrase you need ( eg: class \u003d "padding ») And we move on the list of results found, simultaneously looking through all the styles associated with the necessary elements on the right side of the page.

How to view the HTML code of the element (elements) loaded dynamically (for example: by AJAX)

We are waiting for the page downloads in Google Chrome. We carry out the necessary actions to work the AJAX. Click right-click on the downloaded data, select the "View Item Code" in the context menu, we investigate the result in the console on the Elements tab on the left.

View CSS Style Changes in Real-Time

By the way, it is also convenient to observe if necessary: \u200b\u200bwhat styles are assigned to an element of the raid, for example, when scrolling galleries and other timer events. All real-time styles assigned via JavaScript will be displayed in the property. style. Selected item in the window on the "Elements" tab.

Interactive viewing of the influence of CSS rules on the HTML tag representation

Google Chrome provides an interactive console for CSS styles. And this means that you can not only view which styles apply to the element, but, and bring the mouse cursor to a specific CSS properties, turn on using the pop-up tick to the right, or disable it by removing the flag, and viewing the resulting result on the page.

Change the submission structure of the HTML elements of the raid (right in the browser)

So, to explore the structure of the Web document in Google Chrome, we have already learned, now consider briefly editing the elements of the raid. Go to the console in any way convenient for us. We find the desired item in the "Elements" tab, click on it with the right mouse button, thereby calling the pop-up context menu:

• Add attribute. - Adds an attribute for the specified item. As soon as the cursor becomes an active, start specifying the desired property. for example: Write Name \u003d "ItemImage", which will be immediately added to our element.
• Edit attribute. - If you click the right-click attribute to the item, it becomes available edit.attribute.. Click, edit.

Example of use:we forgot the password stored under the asteristers in Google Chrome (if the password was saved in this browser). Click right-click on the element with the password input, click on "View Element code» , in the console on the left on the tab Elementsclick on the attribute Type \u003d "password" right-click, left click on the mouse Edit.aTTRIBUTE,we change the attribute type \u003d "pASSWORD » on the type \u003d "text "And here we already have the most password in the form of text instead of stars.

• Edit.hTML - click right-click on the element in the console Elements, choose Edit.hTML,change the code to your liking.
• CopyasHTML - Copy the HTML portion you need for further research, say, in notebook, or for other purposes, where we need to apply exactly the same layout. We save time.
• CopyXpath. - Copies XPath representation of the structure from the root of the parent element to the dedicated element.
• Delete.node. - If you need to remove the current dedicated element and all its subsidiaries from context web Pagesand see the result.
• Word.wrap. - Make a web page view in the console context Elements more readable.

In the following articles, we will continue consideration of funds for a Web master, and in particular, we will get acquainted with the other tabs of tools for the Web Master in Google Chrome.and also consider debugging JavaScript errors tools from different browsers

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 the examples that will be hidden below any user of Google Chrome will be able to see 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 it is necessary to use "View Code", and in what "page view" in google browser Chrome.

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

1. "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.
2. "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.
3. 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.
4. "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 what 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:

1. Close Google Chrome and launch the built-in browser Windows Explorer.
2. We enter the following command to the address bar:% LocalappData% \\ Google \\ Chrome \\ User Data \\.
3. When the directory opens, we are looking for the folder "Default" and add to its name "Backup" so that the following is: "Backup Default".
4. 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:

1. Open command line Windows ("Run") and enter the "CMD" command there.
2. Enter the following command in the line: RD / S / Q "% WINDIR% \\ System32 \\ GroupPolicyusers".
3. After confirming the action, drive this: RD / S / Q "% WINDIR% \\ System32 \\ Grouppolicy".
4. 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.