面板

Element

左边查看dom树，右边查看style信息

• :hov .cls 添加伪类，和添加class

• computed 可以查看最终的样式，同时可以查看生效的规则

• eventListeners 查看该dom节点绑定的事件

• toggle device toolbar

  • 切换分辨率

  • 切换dpr

Source

什么是断点

简单地说，断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。

场景

• Line-of-code ： 知道在DevTools代码里要打点的具体区域；

• Conditional line-of-code ： 知道在DevTools代码里要打点的具体区域且设置条件，只有为真才执行断点操作；

• DOM ： 在 body 中添加，检测节点或其子节点的增删和属性变化；

• XHR ： 在 xhr url 包含特定内容的时候打点；

• Event listener ： 在触发特定事件的时候打点；

• Exception ： 在抛出异常的时候打点

• Function ： 在特定函数被调用的时候打点；

debug(fn)

• debugger ： 在书写的代码里希望打点的时候手动打点；

单步调试

• call Stack 查看当前调用堆栈

• watch 检视一个变量

• Resume Script Execution 跳过当前断点，回复脚本执行

• Step over 步过当前执行语句，遇到函数不会进入函数详情

• Step Into 步入当前执行的函数

• Step out 步出当前的执行函数

• Deactive breakpoints 禁用全部断点

其他技巧

• settimeout： 比如和hoverpopup，鼠标一离开就消失

• 劫持数据： 如object.defineProperty, Proxy，当不知道数据在哪里被改动的时候

• 条件断点： 特定条件才断点、或者用作console.log

• Log Point

Network

面板介绍

• Controls 。使用这些选项可以控制 Network 面板的外观和功能。

• Filters 。 使用这些选项可以控制在 Requests Table 中显示哪些资源。提示：按住 Cmd (Mac) 或 Ctrl (Windows/Linux) 并点击过滤器可以同时选择多个过滤器。

• Overview 。 此图表显示了资源检索时间的时间线。如果您看到多条竖线堆叠在一起，则说明这些资源被同时检索。

• Requests Table 。 此表格列出了检索的每一个资源。 默认情况下，此表格按时间顺序排序，最早的资源在顶部。点击资源的名称可以显示更多信息。 提示：右键点击 Timeline 以外的任何一个表格标题可以添加或移除信息列。

• Summary 。 此窗格可以一目了然地告诉您请求总数、传输的数据量和加载时间

工具栏

• disable cache

• preserve log

• 网络状况修改

查看耗时

点击 Timing 标签可以查看单个资源请求生命周期的精细分解。
生命周期按照以下类别显示花费的时间：

• Queuing

• Stalled

• 如果适用：DNS lookup、initial connection、SSL handshake

• Request sent

• Waiting (TTFB)

• Content Download

如果网络异常更加详细的各流程耗时这一点很重要

Console

技巧

• console.trace 输出当前的调用栈

• copy 复制

• $_ 上一个结果

• $0-$5 最近5个选中的dom节点

Memory

面板介绍

• 红圈1处是手动触发GC

• 当前分配的内存

简单判断是否内存泄漏

1. 需要在无痕模式下进行，排除插件等干扰

2. 在一些可能造成内存泄漏的场景下进行操作，然后手动触发GC，查看内存占用情况。

3. 如果存在内存泄漏，可以在操作的关键节点通过take snapshot生成快照，再对比快照，分析占用内存的主要是什么

比如下面的代码

var a = [];
function add() {
    for (let i = 0; i < 10000; i++) {
        a.push({
            a: '1'
        });
    }
}
复制代码

初始的内存，打一个快照

调用10次add()后, 再打一个快照,

在第二个快照，选择比较模式

可以看到大量新增的内容占用

Application

查看存储相关，如cookie，localstorage

任务管理器

查看tab的 内存、CPU、网络 使用情况