阅读 738

chrome devtools使用详解——Elements篇

本文会忽略一些过于基础的知识和细节

持续更新,欢迎关注~

devtools——前端开发者的福音,进阶高级工程师必须锻造的利器!

那么先截图瞅瞅devtools

image.png

目前新版本有以下菜单:

  • Elements 查看 DOM 树
  • Console 控制台
  • Sources 查看源码以及打断点
  • Network 记录网络请求信息
  • Performance 运行时性能表现(解析 JS、计算样式、重绘等)
  • Memory JS对象和相关联的 DOM 节点的内存分布情况
  • Application 记录资源(存储信息、缓存信息以及页面用到的图片、字体、脚本、样式等信息)
  • Security 检测当面页面的安全性
  • Audits 给出提高页面性能的建议

从本篇文章开始逐个强撸!

Elements


我是截图

dom树

如上图中的1区域,相信大家都是成熟的老油条了,简单的不多赘述,挑些不常见但实用的讲讲

1. 右键菜单

右键菜单截图

  • Hide element 隐藏元素。这个必需说下,相信大家在看到广告或者去掉迅雷种子(#。#正经)的遮罩层的时候一定想起自己的专业技能,那么你是display:none还是Delete element?试试Hide element更好用
  • Force state
    Force state
    强制状态,其实就是添加伪类。这个功能在调试伪类样式很好用:
    Force state > hover
  • Break on
    image.png
    断点调试,没错html里也可打断点的!
  1. subtree modifications 子节点添加、删除、移动的话,则会触发
  2. attribute modifications 节点属性修改时触发
  3. node removal
    subtree modifications 示例

Event Listeners

事件监听器列表

div绑定事件后

选中一个元素,可以看到经过它的事件列表(冒泡和捕获)。

  • Ancestors All 去掉祖先元素的事件,只看当前元素包含的事件 上图中如果去掉选中,则不会显示div绑定的click事件
  • Framework listeners 去掉框架的事件

Properties

元素包含的属性

properties

如图包含了多个属性分类,点开可以看到的才是具体的属性,这些所有的属性都可以通过dom.xx调用

注:Accessibility 貌似用来支持h5的视听障碍功能,了解即可

参考链接

作者CompileYouth

关注下面的标签,发现更多相似文章
评论