Source code of the page hotkeys. Google Chrome - tools for webmasters

So, today we will look at several useful tools for Web masters that make life easier when designing a website. Let's start with the console for the web master in Google Chrome. And let’s go through the questions that most often arise for a webmaster during website layout.

To get to the console, open your website in Google Chrome, right-click anywhere on the web page, and select “View page code” in the contextual drop-down menu, or on a specific element to study by selecting “View code” element".

At the top you will have several tabs listed. Today we will talk about the “Elements” tab , which presents the elements of a web page with highlighting of tags, properties, highlighting the nesting of elements, a representation of the element’s hierarchy in the DOM tree (a hint at the bottom, from the root parent to the current one), the ability to edit elements, a list of their properties, consider searching by elements, as well as Let's get acquainted with viewing css styles, etc., associated with elements.

How can I view all the styles that are associated with a specific element? Which one is used now? In what files are they located?

So, nothing could be easier! Open the Google Chrome browser, open our site - the source of the questions, right-click on the desired element if it is visible in the context of the page, and select “View element code” in the context menu.

At the bottom we have a console with a highlighted tab on the left “ Elements" and all the styles associated with the element on the right, where: Computed Styles– these are general “summary” styles that were assigned to the element from the css rules and settings of the user’s browser (his environment), and at the same time the tab is collapsed.

But we are interested in the “Styles” tab, expanded under it, which lists in turn all the styles assigned to the element, as well as files where these rules are specified for this element by its type, id, class, name, property, attribute, etc. . Moreover, if a css rule is crossed out, it means it was redefined earlier/later (which makes it easy to track which of the css rules has priority and is applied in this case to the element).

Below the console there is a line that shows the element in the document hierarchy, easily allowing you to view the entire list of parent elements from the root to the selected element. Something like “bread crumbs”.

Html tag not visible in the context of the page? Or do you need to find all tags, for example, by a specific class, name, property, type?

Open the site in Google Chrome, right-click, call up the context menu, select « View page code » . Press the key combination “CTRL + F” at the same time, enter the phrase we need ( For example: class=”padding") and move through the list of found results, simultaneously viewing all the styles associated with the desired elements on the right side of the page.

How to view the html code of an element(s) loaded dynamically (for example: via Ajax)

We are waiting for the page to load in Google Chrome. We perform the necessary actions for Ajax to work. Right-click on the loaded data, select “View element code” in the context menu, and examine 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, what styles are assigned to an element on the fly, for example, when scrolling through a gallery and other timer events. All styles assigned via javascript in real time will be displayed in the property style selected element in the window on the “Elements” tab.

Interactively view the impact of css rules on the presentation of html tags

Google Chrome provides an interactive console for css styles. This means that you can not only view which styles are applied to the element, but also move the mouse cursor over a specific css property, enable it using the pop-up checkbox on the right, or disable it by clearing the flag, and view the resulting result on the page.

We change the structure of presentation of html elements on the fly (directly in the browser)

So, we have already learned how to explore the structure of a web document in Google Chrome, now we will briefly look at editing elements on the fly. We go to the console in any way convenient for us. We find the desired element in the “Elements” tab, right-click on it, thereby calling up the pop-up context menu:

• Add attribute– adds an attribute for the specified element. As soon as the cursor becomes active, we begin to set the desired property. For example: write name="itemImage", which will be immediately added to our element.
• Edit attribute– if you right-click on an element attribute, the item becomes available editattribute. Click and edit.

Usage example: We forgot the password saved under asterisks in Google Chrome (if the password was saved in this browser). Right-click on the element with the password entered, click on “View Element Code” , in the console on the left tab Elements right-click on the type="password" attribute, left-click on Editattribute change the attribute type=”password" on type=”text", and now, instead of asterisks, the same password is displayed in text form.

• Edithtml– right-click on the element in the console Elements, select Edithtml, change the code to your liking.
• CopyasHTML– we copy the portion of HTML we need for further research, say, in a notepad, or for other purposes where we need to apply exactly the same layout. We save time.
• CopyXPATH– copies the XPATH representation of the structure from the root of the parent element to the selected element.
• Deletenode– if you need to remove the currently selected element and all its children from the context of the web page, and see the result.
• Wordwrap– will render a web page view in the console context Elements more readable.

In the following articles we will continue to consider tools for webmasters, and in particular we will get acquainted with the remaining tabs of tools for webmasters in Google Chrome, and also consider debugging javascript errors using different browsers

If you open any web page, it will contain typical elements that do not change depending on the type and focus of the site. Example 4.1 shows the code for a simple document containing basic tags.

Example 4.1. Web page source code

Heading

First paragraph.

Second paragraph.

Copy the contents of this example and save it in the c:\www\ folder as example41.html. After that, launch the browser and open the file through the menu item File > Open File (Ctrl+O). In the document selection dialog, select the file example41.html. The web page shown in Fig. 1 will open in the browser. 4.1.

Rice. 4.1. Result of running the example

Elementis intended to indicate the type of the current document - DTD (document type definition, description of the document type). This is necessary so that the browser understands how to interpret the current web page, because HTML exists in several versions, in addition, there is XHTML (EXtensible HyperText Markup Language), which is similar to HTML, but differs from it in syntax. So that the browser “does not get confused” and understands according to which standard to display the web page, it is necessary to set in the first line of code .

There are several types, they differ depending on the version of HTML they are targeting. In table 4.1. The main types of documents with their descriptions are given.

The difference between a strict and transitional document description is a different approach to writing document code. Strict HTML requires strict adherence to the HTML specification and is unforgiving. Transitional HTML is more relaxed about some code flaws, so this type is preferable to use in certain cases.

For example, in strict HTML and XHTML the presence of the tag is required

Tag