Chrome 开发者工具，你知道这些使用姿势吗

2021-08-27  本文已影响0人  YQY_苑

摘要

简单介绍 Chrome 开发者工具，科普一下 Chrome 开发者工具中一些可能不常用但实用的功能

前言

Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具，可用来对网站进行迭代、调试和分析（from: Google 开发者文档）

简介

首先我们可以通过多种方式来唤醒 Chrome 开发者工具

或者通过快捷键

基础面板有这几个

全局搜索代码

点击左边竖形排列的三个小点，选择 Search
点击搜索结果，会跳到具体的源码文件。它会搜索该网页下所有引入的文件。

image.png

Shadow DOM

通常一些比较复杂的原生 DOM 标签，像 <video>，<audio> 还有 <input type="range">，内部是由更多的基础标签构成的，默认情况下我们没办法查看内部构造和样式是怎么样的。

[图片上传失败...(image-98551a-1630031972107)]

在 setting里的 element 一栏把 Show user agent shadow DOM 勾上

[图片上传失败...(image-4298da-1630031972107)]

再重新回到 Element 面板查看页面上的元素，就会发现有很多新的东西出现了，以 <video> 标签为例

image.png

Ingore List

不知道你是否很多时候会遇到这种情况，在调试代码时需要逐步执行，由于遇到函数的时候会跳入函数的执行过程，很容易就在一些无关紧要的逻辑中徘徊许久，即使熟练地运用 step in 和 step out，也还是十分影响效率甚至导致问题难以排查出来（因为我们很多时候关心的是业务代码的实现问题）

这时候就要用到 Ingore List 的功能了，同样打开 setting，左侧导航选择 Ingore List
通过 Add pattern 添加忽略的文件名规则

image.png

这样在调试过程中遇到这些文件的内容就会当成黑盒处理，直接跳过

XHR/fetch Breakpoints

XHR breakpoints 用于异步请求的断点，点击加号图标添加新的断点规则，输入请求 URL 地址（片段），程序会在请求地址包含对应字符串的异步请求发出的位置自动停止

image.png

DOM Breakpoints

DOM breakpoint 可以在 DOM 元素被删除或修改的时候打断程序，在 Element 面板的 DOM 节点上右键，break on 一栏有三个选项

image.png image.png

如上图为 tr 添加 attribute modification 的断点之后，在 DOM Breakpoint 就可以看到这个断点，随后 javascript 中如果有使这个节点属性class新增了hover ，程序就会中断

条件断点

DevTools支持条件断点，我们都知道在代码的行号上单击鼠标可以在当前行设置一个普通断点，程序执行到这里就会暂停。

接着，你可以在断点上右键然后选择 "Edit Breakpoint"，这样就可以看到一个表达式输入框。在里面可以定义条件，如果条件为True，断点就会生效
一个通常的表达式可能是total > 25这种，然而在表达式写console.log语句也是完全OK的。

截屏2021-08-26 15.47.20.png image.png

这个条件表达式可以正常的工作，并且我们可以很明显看到console.log语句在代码经过断点的时候执行了:

因为console.log并没有真正的返回值，所以相当于返回了undefined。这样对应的条件断点相当于不满足条件而不会被触发，程序在打印表达式信息后会继续的执行。所以这种做法感觉就相当于硬编码进去一个调试语句而不需要真的修改自己的代码。

Event Listener Breakpoints

4
Event Listener Breakpoints 可以在事件回调发生的时候中断

image.png

例如我们选中 mouse 鼠标类型中的 click 事件
那么当发生 click 事件的时候，会自动在相应的回调函数执行时中断

灵活运用上面这些方法，可以使平时代码问题排查更加灵活

Animation

除了样式的调试，动画也是可以检查和调试的，通过快捷键 command + shift + P 输入命令 show animation 打开动画面板

image.png

这时候动画面板就会开始监听页面上的动画，当页面上有动画发生的时候，会被记录下来记录

结合这个工具来进行动画编写和调试可以极大提高自己的效率，感兴趣的可以自己摸索一下

Day and Night Transition

FPS meter & Paint flashing

当用户跟页面发生交互的时候，页面上的内容有可能会发生变化，除了我们能明显观察到的视觉改变之外，由于 javascript 的操作，很可能页面上也会有其他内容被修改并重新渲染，这时候可以通过一些辅助工具来监测页面的运行情况

image.png

下面是比较实用的功能：

image.png

通过 FPS meter 可以看到当前页面的实时帧率，正常情况下页面应该是处于 60 fps 的状态，当页面更新不流畅的时候，fps 数值会下降，曲线出现波动。我们可以清楚地看到页面操作造成了哪些位置的更新，结合前面 FPS meter，更方便我们定位页面性能下降的原因。

同时开启Paint flashing。这样我们可以清楚地看到页面操作造成了哪些位置的更新，结合前面 FPS meter，更方便我们定位页面性能下降的原因

内存分析类型

内存快照: 展示了整个页面的JavaScript对象以及DOM节点的内存分配

打开控制台上的Memory面板，会发现相应的录制按钮等操作。

开始录制前先点击下垃圾回收-->点击开始录制。
如果JS堆内存动态分配时间线，结束之前要再点击下垃圾回收，再结束录制

image.png

上面有三个按钮：

1. Summary 总览视图
可以显示按构造函数名称分组的对象。使用此视图可以根据按构造函数名称分组的类型深入了解对象（及其内存使用），适用于跟踪 DOM 泄漏。

内存快照中，展示了整个页面的JavaScript对象以及DOM节点的内存分配


image.png image.png

常见的顶层构造函数：

快照可以用来发现DOM泄露。在Class filter(类过滤器)文本框中输入Detached可以搜索分离的DOM树。如果分离节点被JS引用，有可能就是泄露点。

如下代码，class filter中查找string，在string列表中找到'Hello World!'可以查看到testArray的内存引用。

var testArray = [ {value: 'Hello World!'} ];

最后，根据上面的图来分析一下上面代码产生的效果，根据 js 的类型和引用的关系来分析，变量 testArray 在列表中的情况是：

image.png

基础类型 string 值为 hello ，内存标记是 string@94357，这个 string 值存在于 Object @99423 对象上的 value 属性上；
Object @99423 在 Object 列表里，在 Array @356493 的索引 0 位置存在该对象的引用；
Array @356493 在 Window / @353829 对象上存在引用，属性名为"testArray"；
Window / @353829 是个 Windows 对象，在 Windows 列表里。

"hello" -> 在(string)列表里 -> string@94357 -> value in Object @99423

Object  -> 在 Object 列表里 -> [0] in Array @108181

Array -> 在(array)列表里 -> testArray in Window / @94129

Windows ->  在 Windows 列表里 -> Window / @94129

2. Comparison 对比视图

显示两个快照之间的不同。使用此视图可以比较两个（或多个）内存快照在某个操作前后的差异。检查已释放内存的变化和参考计数，可以确认是否存在内存泄漏及其原因

var testArray = [ {value: 'Hello World!'} ];
function doSomething() { testArray.push({ value: 'Hello Everyone!' }) } 
document.querySelector('#btn').addEventListener('click', doSomething)

点击按钮后，数组中 push 了新的一项对象


image.png

3. Containment 内容视图
查看内存内容。由顶级对象作为入口，更适合查看对象结构，有助于分析对象的引用情况。适用于分析闭包以及深入分析对象。

image.png

4. Statistics 统计视图
总览内存的统计信息

image.png

5. 分配时间线

看完静态的快照，再来看看动态的。
可以持续的记录堆分配的情况,随着时间变化记录内存信息

var testArray = [ {value: 'Hello World!'} ]; 
var count = 1; 
function doSomething() {
  // 每次点击 字符串长度都以上一次为基础增加到5倍，拉大差异突出效果，并且之后在字符串头部加上count值做区分
  count *= 5
  var str = new Array(count * 10).join(':')
  testArray.push({
    value: count + str
  })
}
document.querySelector('#btn').addEventListener('click', doSomething)

每条线的高度与最近分配的对象大小对应，竖线的颜色表示这些对象是否仍然显示在最终的堆快照中。
蓝色竖线表示在时间线最后对象仍然显示，灰色竖线表示对象已在时间线期间分配，但曾对其进行过垃圾回收。


image.png

参考资料：

上一篇下一篇

猜你喜欢

热点阅读