admin管理员组

文章数量:1579086

谷歌调试器

1. Element选项卡

该选项卡主要帮助开发人员快速查看页面结构以及定义样式问题

红色区域为页面结构

左上角有两个小按钮，一个鼠标箭头，一个手机

  • 当点击箭头时，此时将鼠标移入页面中，你鼠标所停留地方对应dom结构会自动出现在可视区域，并且页面上会有一个tooltips展示该元素的一些基本信息，比如类名，宽高

  • 当点击小手机时，这个操作主要是为了移动端开发或者调试开启的


黑色区域为选中元素的属性，我们注重说明黑色区域的功能

  • style

​ style 中还有两个比较常用的选项

分别是**:hov** 和**.cls**,点击:hov 时会展示出伪类选项,当勾选某一个时，就会显示出该元素对于的样式(如果有的话) 比如

点击.cls 时 会展示当前元素 所有的类名 ，可以手动进行勾选，进行应用与取消，如下图

  • Computed

    • 展示选中元素计算之后的属性，即将那些相对大小的属性，全部计算为一个绝对的值

    • 分成两部分 ，上面一部分展示的就是当前元素的盒子模型，下面即计算后的属性

  • layout

    • 展示的是该页面中用到的网格布局和弹性布局

  • Event Listeners

    • 故名思义 显示该该元素绑定的DOM事件

    • 看到该元素绑定了鼠标移入移出 事件 蓝色部分是代码所在位置 点击remove 事件就被移除了，若是勾选ancestors 则会展示该元素所有祖先元素绑定的事件

  • Properties

    • 展示该元素对应DOM对象所有的属性

  • DOM breakpoints

    • 可以监听某一个元素的变化

    • 如何给一个元素添加DOM断点呢？

      • 在页面结构中，将鼠标放在该元素上右击找到break On选项

        • subtree modifications 监听子树的改变
        • attribute modifications 监听自身属性的改变
        • node removal 监听自身被移除的变化

      • 添加之后，一旦触发相应的变化，便会立即跳到相应源码的位置

本文标签： 调试器

版权声明：本文标题：谷歌调试器 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/xitong/1727850037a1133483.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。