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

持续更新，欢迎关注~

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