Chrome developer tools tutorial-01-element panel

I recorded a video and put it on station b.
https://www.bilibili.com/video/BV1Zm4y1S79F
The video is more clear and detailed

1, DOM panel

1. Mouse click to select DOM element, double click to edit
2. Drag, copy, cut, paste (ctrl c, ctrl v, ctrl x shortcut keys)
3. Search for ctrl F (you can search for strings, css selectors, xpath,)

    比较复杂的css选择器也可以，比如：
    相邻兄弟选择器 .my-button+.my-button、
    属性选择器 [class^="nav"]
    这个功能很实用，调试代码有时候用得着

4. Right mouse button
add attribute : Add attribute
force status : Set the element state, which can be used to debug the styles of different states

    (:hover、:active、:focus、:visited、:focus-within、:focus-visible)
    style面板也有一个地方可以设置元素状态

break on : breakpoints when elements change

     subtree modifacations: 子节点改变
     attribute modifications: 属性改变
     node removal: 节点被删除

expand recursively : Expand
collapse children : put away
capture node screenshot : Screenshot

    （注意滚动条）
    比如 截b站首页https://www.bilibili.com/  
    选中html标签，或者body标签，都只能截到一屏，
    可以看右边的computed面板的height
    html标签的height只有864px。 
    #app高度有14048px,那就截图#app，可以截到完整的页面。

2, style panel

filter : filter filter
:hov : set element state

style sheet:
Double click to edit,
Press the up and down arrow keys to add 1/subtract 1 to the numeric value.
For keywords, you can see all the values that can be set, and press the up and down keys to switch.

3,computed panel

• Last practical value
• Convert relative values to absolute values (such as em, rem, percentage, vh, vw, etc., replace them with px)
  filter : Screening
  show all : show all (many properties are not set by the style sheet and have default values)
  group : Combine by layout, text, appearance, etc.

4,Event Listeners

listener events for an element (and its ancestors)
If you Ancestors , it will show you + ancestors,
If you don't check it, only show your own

5,DOM Breakpointers

The breakpoint hit by right-clicking on break on