Chrome DevTools面板功能详解

Chrome DevTools面板的功能介绍

Chrome DevTools是一组内置在Google Chrome浏览器中的web开发者工具。凭借着简单、快捷、强大的功能，使得越来越受到开发者的青睐。

Elements面板

css调试

style

选中目标节点，element 面版，查看 style->:hov, 选择对应的状态即可

computed

有时候样式覆盖过多，查看起来很麻烦，computed就派上用场了

点击某个样式可以直接跳转至对应css定义

调整某个元素的数值

选中想要更改的值，按方向键上下就可以 + / - 1 个单位的值

alt + 方向键 可以 ×10 调整单位值
Ctrl + 方向键 可以 ×100 调整单位值
shift + 方向键 可以 /10 调整单位

html 调试

骚操作

选中节点，直接按键盘H可以直接让元素显示/隐藏，不用手动敲样式了，效果等同visibility: hidden，还是要占据盒模型空间的。

将某个元素存储到全局临时变量中

选中节点，右键，Store as global variable（在network面板中也能用，尤其是筛选接口的返回值很方便）

滚动到某个节点

如果页面很长，想找一个文本节点的显示位置又不想手动滑动可以试试Scroll into view

Edge专属的3D视图

使用chromium后的Edge真的是改头换面3D视图可以帮忙定位一些定位层级还有DOM嵌套的问题，页面结构写的好不好看很直观的可以看出来 (跟辅助功能里面的dom树结合使用很舒服)

目前chrome还是没有这项功能的，Edge打开位置：F12=>切换面板最后+(更多工具) 选择3D视图面板

DOM 断点

可以监听到DOM节点的变更(子节点变动/属性变更/元素移除)，并断点至变更DOM状态的js代码行：

Console面板

console对象

首先看一下 console 对象下面都有哪些方法:

console.clear()

清空控制台

console.log(), info(), warn(), error()

这些是比较常用的

console.log('普通信息')
console.info('提示性信息')
console.error('错误信息')
console.warn('警示信息')

使用占位符

// 支持逗号分隔参数，不需要每个参数都单独打印
console.log(1, '2', +'3')
// 占位符
// %s 
console.log('今晚%s 老虎', '打', '？？？')
// %c 
console.log('今晚%s%c 老虎', '打', 'color: red', '？？？')
// 带有占位符的参数之后的若干参数属于占位符的配置参数

其余的占位符列表还有：

占位符	功能
%s	字符串
%d	数字
%i	整数
%f	浮点数
%o	对象
%c	css样式

console.time(), timeEnd()

time和timeEnd一般放在一起用，传入一个参数用来标识起始位置用于统计时间:

console.time('t')
Array(900000).fill({}).forEach((v, index) => v.index = index)
console.timeEnd('t')
// t: 28.18603515625ms

会打印出中间代码的执行时间

console.count()

计数, 可以用来统计某个函数的执行次数，也可以传入一个参数，并且根据传入的参数分组统计调用的次数

function foo(type = '') {
  type ? console.count(type) : console.count()
  return 'type：' + type
}

foo('A') //A: 1
foo('B') //B: 1
foo()    //default: 1
foo()    //default: 2
foo()    //default: 3
foo('A') //A: 2

console.trace()

用于追踪代码的调用栈，不用专门断点去看了

console.trace()
function foo() {
  console.trace()
}
foo()

console.table()

console.table() 方法可以将复合类型的数据转为表格显示

var arr = [
  { name: '梅西', qq: 10 },
  { name: 'C 罗', qq: 7 },
  { name: '内马尔', qq: 11 },
]
console.table(arr)

console.dir()

按便于阅读和打印的形式将对象打印

var obj = {
  name: 'justwe7',
  age: 26,
  fn: function () {
    alert('justwe7')
  },
}
console.log(obj)
console.dir(obj)

console.assert()

断言，用来进行条件判断。当表达式为 false 时，则显示错误信息，不会中断程序执行。

var val = 1
console.assert(val === 1, '等于 1')
console.assert(val !== 1, '不等于 1')
console.log('代码往下执行呢啊')

console.group(), groupEnd()

分组输出信息，可以用鼠标折叠/展开

console.group('分组 1')
console.log('分组 1-1111')
console.log('分组 1-2222')
console.log('分组 1-3333')
console.groupEnd()
console.group('分组 2')
console.log('分组 2-1111')
console.log('分组 2-2222')
console.log('分组 2-3333')
console.groupEnd()

$ 选择器

$_

可以记录上次计算的结果，直接用于代码执行:

$0,$1…$4

代表最近 5 个审查元素选中过的 DOM 节点，看图（是要选中一下，我更喜欢用存储全局变量的方式玩，省的自己手残又选了一个节点）：

$和?

• $(selector)是原生 document.querySelector() 的封装。
• ?(selector)返回的是所有满足选择条件的元素的一个集合，是 document.querySelectorAll() 的封装

$x

将所匹配的节点放在一个数组里返回

<ul>
  <ul>
    <li><p>li 下的 p1</p></li>
    <li><p>li 下的 p2</p></li>
    <li><p>li 下的 p3</p></li>
  </ul>
</ul>
<p>外面的 p</p>

$x('//li') // 所有的 li
$x('//p') // 所有的 p
$x('//li//p') // 所有的 li 下的 p
$x('//li[p]') // 所有的 li 下的 p

keys(), values()

跟 ES6 对象扩展方法，Object.keys()和Object.values()相同

keys(obj);
values(obj);

copy()

可以直接将变量复制到剪贴板

copy(temp1)

Sources面板

主要用来调试页面中的 JavaScript

自定义代码片段 Snippets

经常有些JavaScript的代码想在控制台中调试，假如代码量多的情况下直接在console下写比较麻烦，在Snippets中写非常方便。

如图所示，在 Sources 这个tab栏下，有个 Snippets 标签，在里面可以添加一些常用的代码片段。

设置断点

断点的面板

指定位置的中断

找到源代码，点击要中断代码执行的位置，点击红色按钮的位置。然后再触发该方法执行，因为已知点击按钮可以触发，精准的定位到代码行就可以了:

全局事件中断

假如不知道代码执行的位置，如以下场景：

看接口返回的列表总数应该是 20 条，但是页面到 15 条就显示到底部了

看代码写的判断条件有点问题，但从编译后的代码找到对应位置进行调试就相当于大海捞针了。想试试自己的设想的解决方式是否正确：

• 1.因为列表是提拉加载，所以肯定会触发网络请求，可以在事件侦听器里面打一个XHR的断点
• 2.然后提拉加载页面触发接口请求，如预期的，代码中断执行了。但提示找不到sourcemap，暂时把 js 的资源映射给关掉
  
  
• 3.再次触发断点，发现可以查看到中断的代码了，因为肯定是页面中的业务代码将请求推入到执行堆栈的，所以可以在堆栈中找到对应的方法名：getVideoList
  
• 4.点击方法名可以跳转到对应的源码，可以看到圈起来的代码和所猜想的问题代码应该是同一处
  
• 5.回过来看下问题原因： 页面请求完新数据后直接 pageNum 自增，然后直接就用于是否结束的判断了，有点不够严谨，不如直接比对当前的列表长度与接口返回的数据总数来判断:
  
• 6.记住要修改的代码，在这个文件开头，也就是 191.xxx.js
  第一行先打个断点，push 方法之前再打一个断点:
  
  (如果没有再刷新一下)
  然后刷新页面，找到刚刚想要修改的代码: 用t.recommendList.length替换掉n.pageSize*t.pageNo（前两步是为了避免 js 开始解析问题代码，先阻塞一下运行
• 7.再Ctrl+S，保存一下，然后看下页面效果，列表可以全部加载出来了:
  

  在美化代码的面板中是不支持直接修改页面代码的

黑盒模式

把脚本文件放入 Blackbox(黑盒)，可以忽略来自第三方库的调用堆栈
默认（不开启黑盒）：

开启黑盒：

• 打开方式①

  打开DevTools Settings(设置)
  在左侧的导航菜单中，单击Blackboxing(黑箱)
  点击Add pattern...(添加模式) 按钮。
  在Pattern(模式) 文本框输入您希望从调用堆栈中排除的文件名模式。DevTools会排除该模式匹配的任何脚本。
  在文本字段右侧的下拉菜单中，选择Blackbox(黑箱)以执行脚本文件但是排除来自调用堆栈的调用，或选择Disabled(禁用)来阻止文件执行。
  点击Add(添加) 保存

• 打开方式②
  直接在想要忽略的堆栈信息上blackbox script

DOM 断点

查看element面板DOM断点

Network面板

可以查看通过网络请求的资源的相关详细信息

按区域划分大概分为如下几个区域：

• Controls-控制Network功能选项，以及一些展示外观
• Filters-控制在Requests Table中显示哪些类型的资源(tips：按住Cmd(Mac)或Ctrl (Windows/Linux)并点击筛选项可以同时选择多个筛选项)
• Overview-此图表显示了资源检索时间的时间线。如果看到多条竖线堆叠在一起，则说明这些资源被同时检索
• Requests Table-此表格列出了检索的每一个资源。 默认情况下，此表格按时间顺序排序，最早的资源在顶部。点击资源的名称可以显示更多信息。 提示：右键点击Timeline以外的任何一个表格标题可以添加或移除信息列
• Summary-可以一目了然地看到页面的请求总数、传输的数据总量、加载时间

Controls，Filters 区域

Filters 控制的展示：

• 使用大请求行-默认情况下，Requests Table一个资源只显示很小的一行。选中Use large resource rows(使用大资源行) 按钮可以显示两个文本字段：主要字段和次要字段。
• 捕获屏幕截图-将鼠标悬停在某个屏幕截图上的时候，Timeline/Waterfall(时间轴) 会显示一条垂直的黄线，指示该帧是何时被捕获的
• 显示概述 - 展示页面整个生命周期的各个阶段（Overview 区域）的耗时（蓝色绿色的那些横杠）

Overview 区域

页面整个生命周期的各个阶段网络资源加载耗时信息的汇总，可以选择区域来筛选Requests Table的详细资源信息

Requests Table 区域

标题栏的对应描述：

• Name(名称): 资源的名称。
• Status(状态): HTTP 状态代码。
• Type(类型): 请求的资源的 MIME 类型。
• Initiator(发起): 发起请求的对象或进程。它可能有以下几种值：
  Parser(解析器): Chrome 的 HTML 解析器发起了请求。
  Redirect(重定向): HTTP 重定向启动了请求。
  Script(脚本): 脚本启动了请求。
  Other(其他): 一些其他进程或动作发起请求，例如用户点击链接跳转到页面，或在地址栏中输入网址。
• Size(大小): 响应头的大小（通常是几百字节）加上响应数据，由服务器提供。
• Time(时间): 总持续时间，从请求的开始到接收响应中的最后一个字节
• Timeline/Waterfall(时间轴): 显示所有网络请求的可视化统计信息

在标题栏如 (Name 上) 右键，可以添加或删除信息列。比如可以多加一列Response Header => Content-Encoding选项来总览页面资源的gzip压缩情况:

重新发起xhr请求

在平时和后端联调时，我们用的最多的可能就是Network面板了。但是每次想重新查看一个请求通过刷新页面、点击按钮等方式去触发xhr请求，这种方式有时显得会比较麻烦，可以通过Replay XHR的方式去发起一条新的请求：

查看 HTTP 相关信息

查看网络请求的参数
可以通过点击query string parameters(查询字符串参数) 旁边的view URL encoded(查看 URL 编码) 或view decoded(查看解码) 链接，查看URL编码或解码格式的query string parameters(查询字符串参数)。在使用postman复制相关入参时尤其实用。

查看HTTP响应内容 点击Response(响应) 标签页可以查看该资源未格式化的HTTP响应内容
接口的返回值 (在preview中）同样也可以Save global variable存储一个全局变量

Size 和 Time 为什么有两行参数？

Size列

第一行表示的是数据的传输时的大小，例如上图中的190KB
第二行表示的是数据实际的大小708KB

在服务器端采取gzip压缩算法将原有708KB压缩至190KB, 传输大小缩短3.7倍，大大的提高了资源传输的效率

需要注意的点：
gzip压缩只会压缩响应体内容，所以适用于返回数据量大的时候，如果数据量太小的话，有可能会导致数据传输时的大小比实际大小要大 (加入了一些额外的响应头)

Time列

第一行表示从客户端发送请求到服务端返回所有数据所花费的总时间，对于上图来说就是471ms
第二行表示的是从客户端发送请求到服务器端返回第一个字节所表示的时间，对于上图来说就是55ms

第一行的时间代表了所有项目：例如解析dns，建立连接，等待服务器返回数据，传输数据等
第二行的时间是 总时间-数据传输的时间

从上面的分析中我们看到 从客户端请求到服务器处理结束准备返回数据花了55ms，但是在进行传输数据的时候花费了471ms
对于网慢的用户来说，可能会耗费更长的时间，所以在写代码（接口）的时候，返回的数据量要尽量精简

Waterfall

点击某个资源会展示出详细的网络加载信息：

相关字段描述:

• Queuing (排队)

  浏览器在以下情况下对请求排队

  • 存在更高优先级的请求, 请求被渲染引擎推迟，这经常发生在images（图像）上, 因为它被认为比关键资源（如脚本 / 样式）的优先级低。
  • 此源已打开六个TCP连接，达到限值，仅适用于HTTP/1.0和HTTP/1.1。在等待一个即将被释放的不可用的TCP socket
  • 浏览器正在短暂分配磁盘缓存中的空间，生成磁盘缓存条目（通常非常快）

• Stalled(停滞)-发送请求之前等待的时间。它可能因为进入队列的任意原因而被阻塞，这个时间包括代理协商的时间。请求可能会因Queueing中描述的任何原因而停止。

• DNS lookup(DNS 查找) - 浏览器正在解析请求IP地址，页面上的每个新域都需要完整的往返(roundtrip)才能进行DNS查找
• Proxy Negotiation-浏览器正在与代理服务器协商请求
• initial connection(初始连接)-建立连接所需的时间，包括TCP握手/重试和协商SSL。
• SSL handshake(SSL握手)-完成SSL握手所用的时间
• Request sent(请求发送)-发出网络请求所花费的时间，通常是几分之一毫秒。
• Waiting(等待)-等待初始响应所花费的时间，也称为Time To First Byte(接收到第一个字节所花费的时间)。这个时间除了等待服务器传递响应所花费的时间之外，还包括1次往返延迟时间及服务器准备响应所用的时间（服务器发送数据的延迟时间）
• Content Download(内容下载)-接收响应数据所花费的时间 (从接收到第一个字节开始，到下载完最后一个字节结束)
• ServiceWorker Preparation-浏览器正在启动Service Worker
• Request to ServiceWorker-正在将请求发送到Service Worker
• Receiving Push-浏览器正在通过HTTP/2服务器推送接收此响应的数据
• Reading Push-浏览器正在读取之前收到的本地数据
  

  Summary 区域

  
  requests查看请求的总数量|transferred查看请求的总大小|resources资源|Finish所有http请求响应完成的时间|DOMContentLoaded时间|load时间
  当页面的初始的标记被解析完时，会触发DOMContentLoaded。它在Network(网络) 面板上的显示：

  • 在Overview(概览) 窗格中的蓝色垂直线表示这个事件。
  • 在Requests Table(请求列表) 中的红色垂直线也表示这个事件。
  • 在Summary(概要) 窗格中，您可以查看事件的确切时间。

当页面完全加载时触发load事件。

• 在Overview(概览)窗格的红色垂直线表示这个事件。
• 在Requests Table(请求列表)中的红色垂直线也表示这个事件。
• 在Summary(概要)中，可以查看改事件的确切时间。

• DOMContentLoaded会比Load时间小，两者时间差大致等于外部资源加载（一般是图片 / 字体）的时间
• Finish时间是页面上所有http请求发送到响应完成的时间（如果页面存在一个轮询的接口，这个值也会累加的）。HTTP1.0/1.1协议限定单个域名的请求并发量是6个，即Finish是所有请求（不只是XHR请求，还包括DOC，img，js，css等资源的请求）在并发量为6的限制下完成的时间。
  • Finish的时间比Load大，意味着页面有相当部分的请求量
  • Finish的时间比Load小，意味着页面请求量很少，如果页面是只有一个html文档请求的静态页面，Finish时间基本就等于HTML文档请求的时间
• 所以Finish时间与DOMContentLoaded和Load并无直接关系

使用 Network 面板进行网络优化

排队或停止阻塞

最常见的问题是很多个请求排队或被阻塞。这表示从单个客户端检索的资源太多。在HTTP 1.0/1.1连接协议中，Chrome限制每个域名最多执行6个TCP 连接。如果一次请求十二个资源，前6个将开始，后6个将排队。一旦其中一个请求完成，队列中的第一个请求项目将开始其请求过程。

要解决传统HTTP 1的此问题，需要用多个子域名提供服务资源，将资源拆分到多个子域中，均匀分配。

上面说的修复HTTP 1连接数问题，不适用于HTTP 2连接，如果已部署HTTP 2，不要对资源进行域划分，因为它会影响HTTP 2的工作原理（在 HTTP 2中TCP连接多路复用连接的）。取消了HTTP 1的6个连接限制，并且可以通过单个连接同时传输多个资源。

接收到第一个字节的时间很慢

绿色的块占据比例很高：

TTFB就是等待第一个响应字节的时间，建议在200ms以下，以下情况可能会导致高TTFB:

• 客户端和服务器之间的网络条件差
• 要么，服务器端程序响应很慢

为了解决高TTFB，首先去排除尽可能多的网络连接。理想情况下，在本地托管应用程序（部署在本地），并查看是否仍有一个大的TTFB。如果有，那么需要优化应用程序针的响应速度。这可能意味着优化数据库查询，为内容的某些部分实现高速缓存，或修改Web服务器配置。后端可能很慢的原因有很多。您需要对您的程序进行研究，并找出不符合您预期的内容。
如果本地TTFB低，那么是您的客户端和服务器之间的网络问题。网络传输可能被很多种事情干扰阻碍。在客户端和服务器之间有很多点，每个都有自己的连接限制，可能会导致问题。测试减少这种情况的最简单的方法是将您的应用程序放在另一台主机上，看看TTFB是否改进。

加载缓慢

蓝色的块占据比例很高：

如果Content Download(内容下载)阶段花费了很多时间，提高服务响应速度、并行下载等优化措施帮助都不大。主要的解决方案是发送更少的字节（比如一张高质量的大图可能几M的大小，这时可以酌情优化一下图片的宽高/清晰度）

Performance面板

参考

Memory面板

参考

Application面板

参考

Security面板

用于检测当面页面的安全性

该面板可以区分两种类型的不安全的页面：

• 如果被请求的页面通过HTTP提供服务，那么这个主源就会被标记为不安全。
• 如果被请求的页面是通过HTTP 获取的，但这个页面接着通过HTTP继续从其他来源检索内容，那么这个页面仍然被标记为不安全。这就是所谓的混合内容页面, 混合内容页面只是部分受到保护, 因为HTTP内容 (非加密的内容通信使用明文) 可能会被窃听, 容易受到中间人攻击。如 163，虽然证书是有效的，但是页面有一部分http资源：

Lighthouse面板

Lighthouse是一个开源的自动化工具，用于改进网络应用的质量。您可以将其作为一个Chrome扩展程序运行，或从命令行运行。您为Lighthouse提供一个您要审查的网址，它将针对此页面运行一连串的测试，然后生成一个有关页面性能的报告，会对页面的加载进行分析，然后给出提高页面性能的建议。

• Performance性能
• accessibility无障碍使用
• Best Practice用户体验
• SEO优化
• Progressive Web App页对于PWA的兼容性

Command

快捷命令

快捷键Ctrl + Shift + P

查找文件

快捷键Ctrl + P

demo

截图

Ctrl + Shift + P进入快捷模式，输入capture，选择capture full size screenshot是全屏截图，选择capture node screenshot是当前节点的截图。

js覆盖率

Ctrl + Shift + P进入快捷模式，输入show coverage。

css overview

Ctrl + Shift + P进入快捷模式，输入show css overview。

参考