Element tool (element inspector)

Structure

The first tool I would recommend to everyone is the Element tool . An extremely important tool in devtools What is so important here?

This is the instance of the website’s DOM data structure and is modeled by a tree structure.

Elements tool has 2 parts:

• Part element: tags and attributes, data
• Tool part: element.style, events on element, information applied to the tag, attributes of the tag, etc.

Use

Element

The tree data structure part of the tag is divided into HTML node structure According to DOM W3C HTML standard, everything in HTML document is a node:

• The entire document is a document node
• Each HTML element is an element node
• Text inside HTML elements are text buttons
• All comments are comment buttons

For example:

As such, all websites are linked with buttons so you can manage and customize them easily.

How to find a button from a web page:

• Method 1: Put the mouse in the word to search -> right mouse -> inspect
• Method 2: Press (Ctl + shit + I) or F12 -> Ctr + F -> type card name / tag properties / tenthe [thuoctinh = “giatri”] -> Enter to find a tag if there are multiple tags.

** strick: when a tag is selected, there will be a last line on the element tab to show the relation of the tag to the parent’s father, father …. Click here we can go to the ancestor tag of it in the tree

Custom components:

For each tag we have customizable components such as:

• Add attribute ,
• Edit attribute ,
• Or you can edit the whole tag via Edit HTML ,
• Delete element
• Copy : tags, paths in the tree, …
• Force state : Attaches events to tags: active, forcus …
• Scroll to view : Brings the position of the card to the webpage
• Break on: Create DOM Breakpoints
• Store as global variable : Store as global variable tag in a variable to use for devtools like the Console
• ….

** Note: you can drag and drop cards in the tree to change trees! (try it )

Styles

This is where the CSS of the element is currently selected. It is compiled from the CSS file. Compile from top to bottom and when applied to the browser will be opposite (bottom to top according to CSS compilation). CSS properties can also be added to HTML elements, or you can create a new “New style rule”. It is also possible to add the Focre element state :active Focre element state :hover , … properties to the element element.

Also when changing the screen or changing status of some elements will be updated styles and it is also here for you to edit them.

Computed

The styles to be applied are shown here with an intuitive innerHTML and outterHTML diagram. We can also adjust inner or outer styles right in the diagram.

Here the style is easily searchable via the name hat next to it (if any).

Event Listenners

Events are defined in the site. We can remove these events or edit them in the Sources tool.

DOM Breakpoints

Use DOM Breakpoints if you want to pause the code that changes the DOM node and its children.

How to create DOM Breakpoints then on the element I said

There are 3 basic types:

• Subtree modifications : Activate when the child of the current node is added, deleted or changed. Not activated when the child node property changes or the properties of the currently selected node change.
• Attributes modifications : Activates when an attribute is added, deleted or changed on the currently selected button.
• Node Removal : Activates when the selected node is removed.

After enabling DOM Breakpoint, it will switch to the Source tool is processing the node change. (This I will introduce later in the Source tool ).

Properties

Place showing the most complete attributes of the card. Attribute functions that any tag needs.

Accessibility

To make your site more acceptable and user-friendly, it is important that it is easily accessible. Accessibility is a tool that can check website availability. You can refer to the standards at w3.org

Conclude

Due to some weak knowledge, I only write some parts I understand of the element inspector if there is something wrong looking forward to receiving comments from everyone. Thanks for reading my article