chrome 开发者工具使用教程-01-element面板

录了段视频放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:设置元素状态
chrome 开发者工具使用教程-01-element面板_第1张图片
样式表:
双击可编辑,
数值型的值 按上下方向键 会加1/减1,
关键词的 可以看到所有可以设置的值,按上下键可切换。

3,computed 面板

  • 最后实际应用的值
  • 相对值换算成绝对值(比如em、rem、百分比、vh、vw等,换成px)
    filter:筛选
    show all: 显示全部(很多属性没有被样式表设置的,有默认值)
    group: 按布局、文字、外观等组合

4,Event Listeners

chrome 开发者工具使用教程-01-element面板_第2张图片
元素(和它的祖先元素)的监听事件
如果把Ancestors勾选上,就显示自己+祖先的,
如果不勾选,就只显示自己的

5,DOM Breakpointers

chrome 开发者工具使用教程-01-element面板_第3张图片
右键 break on 打的断点会显示在这里

你可能感兴趣的