本文会忽略一些过于基础的知识和细节
持续更新，欢迎关注~
devtools——前端开发者的福音，进阶高级工程师必须锻造的利器！
先截图瞅瞅devtools
image.png
目前新版本有以下菜单：
-
Elements查看 DOM 树 -
Console控制台 -
Sources查看源码以及打断点 -
Network记录网络请求信息 -
Performance运行时性能表现（解析 JS、计算样式、重绘等） -
MemoryJS对象和相关联的 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的视听障碍功能，了解即可
