目录
- 常用调试
- 网络调试
- 性能调试
- 实验性功能
- 实用插件分享
一、常用调试
- dom节点强制增加状态
可以快捷给dom 节点增加某个状态，方便样式调试。
- dom节点调试样式类
- 快捷增加类样式
可长按选择插入类样式位置，默认为 "inspector-stylesheet.css" 调试样式表
- dom 节点增加断点
使用方式：选择某个dom节点右键，选择 “Break on”
subtree modifications子节点内容的的修改删除新增（子节点的属性修改不会触发，当前节点的修改不会触发）attribute modifications当前节点的属性修改删除新增node removal当前节点被移除
| 类型 | 演示 |
| --- | --- |
| subtree modifications | |
| attribute modifications | |
| node removal | |
- 事件注册位置
可定位事件由哪些代码注册监听，方便断点分析。
- 资源请求位置追溯。
- 实时观察js结果
- 复制console结果
二、网络调试
- 接口重发
目标接口右键即可重发。
- 查看接口/资源是否开启http2及服务端压缩
三、性能调试
- Chrome Memory
常用于内存分析及排查内存溢出
- Allocation instrumentation on timeline：分时段的内存占用
线条高度指内存占用大小，蓝色条代表时段结束未回收的的对象[内存溢出]，灰色代表已回收。
视图[仅堆快照与分时段内存占用可选]
Summary：摘要视图
显示按构造函数名称分组的对象。使用它根据按构造函数名称分组的类型来搜索对象（及其内存使用）。它对于追踪 DOM 泄漏特别有帮助。
Comparison：对比视图【存在多个分析时可用】，与其它快照对比，看增、删、Delta数量及内存大小
显示两个快照之间的差异。使用它来比较操作前后的两个（或多个）内存快照。检查释放内存和引用计数中的增量可让您确认内存泄漏的存在和原因。
Containment：俯瞰视图，自顶向下看堆的情况，根节点包括window对象，GC root，原生对象等等
允许查看堆内容。它提供了一个更好的对象结构视图，帮助分析在全局命名空间（窗口）中引用的对象，以找出它们周围的原因。使用它来分析闭包并深入了解您的对象。
Statistics: 统计视图， 显示内存大小使用统计（扇形图）
列头解释
* Shallow Size ： 对象本身占用的内存
* Retained Size ： 对象本身及其引用总共占用的内存
* Distance ：当前对象到根的引用层级距离
* Alloc. Size : 新分配的内存
* Freed Size ： 释放的内存
- Perfomance
四、实验性功能
1.
五、实用插件分享
- Mokuku
- PostMan
- Console importer