chrome devtools使用详解——Elements篇

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

持续更新，欢迎关注~

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

那么先截图瞅瞅devtools

目前新版本有如下菜单：

• 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

  

  强制状态，其实就是添加伪类。这个功能在调试伪类样式很好用：

  

• Break on

  

  断点调试，没错html里也可打断点的！

1. subtree modifications 子节点添加、删除、移动的话，则会触发
2. attribute modifications 节点属性修改时触发
3. node removal

   

Event Listeners

事件监听器列表

选中一个元素，能够看到通过它的事件列表（冒泡和捕获）。

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

Properties

元素包含的属性

如图包含了多个属性分类，点开能够看到的才是具体的属性，这些全部的属性均可以经过dom.xx调用

注：Accessibility 貌似用来支持h5的视听障碍功能，了解便可

参考连接

做者CompileYouth