Element tool (element inspector)
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.
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
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
For each tag we have customizable components such as:
- Or you can edit the whole tag via
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 variabletag in a variable to use for
** Note: you can drag and drop cards in the tree to change trees! (try it )
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
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.
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).
Events are defined in the site. We can remove these events or edit them in the
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 ).
Place showing the most complete attributes of the card. Attribute functions that any tag needs.
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
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