关于chrome-devtools:chrome-开发者工具使用教程01element面板

录了段视频放 b 站了，
https://www.bilibili.com/vide…

1,DOM 面板

1，鼠标点击选中 DOM 元素，双击能够编辑
2，拖拽、复制、剪切、粘贴（ctrl c,ctrl v,ctrl x 快捷键）
3，搜寻 ctrl F (能够搜字符串、css 选择器、xpath，)

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

4，鼠标右键
add attribute：增加属性
force status：设置元素状态，能够用来调试不同状态的款式

    (:hover、:active、:focus、:visited、:focus-within、:focus-visible)
    style 面板也有一个中央能够设置元素状态

break on：元素发生变化的时候，打断点

     subtree modifacations: 子节点扭转
     attribute modifications: 属性扭转
     node removal: 节点被删除

expand recursively：开展
collapse children：收起
capture node screenshot：截图

（留神滚动条）比方 截 b 站首页 https://www.bilibili.com/  
    选中 html 标签，或者 body 标签，都只能截到一屏，能够看左边的 computed 面板的 height
    html 标签的 height 只有 864px。#app 高度有 14048px, 那就截图 #app，能够截到残缺的页面。

2，style 面板

filter：筛选过滤
:hov：设置元素状态

样式表：
双击可编辑，
数值型的值 按高低方向键 会加 1 / 减 1，
关键词的 能够看到所有能够设置的值，按高低键可切换。

3,computed 面板

• 最初理论利用的值
• 相对值换算成绝对值（比方 em、rem、百分比、vh、vw 等，换成 px）
  filter：筛选
  show all：显示全副（很多属性没有被样式表设置的，有默认值）
  group：按布局、文字、外观等组合

4,Event Listeners

元素（和它的先人元素）的监听事件
如果把 Ancestors 勾选上，就显示本人 + 先人的，
如果不勾选，就只显示本人的

5,DOM Breakpointers

右键 break on 打的断点会显示在这里