海天无影Blog

Chrome DevTools 开发者工具面板详解

/ 3896阅 / 0评 / 3赞

Chrome开发者工具面板

Chrome DevTools开发者工具上包含了Elements面板、Console面板、Sources面板、Network面板、 Timeline面板、Profiles面板、Application面板、Security面板、Audits面板这些功能面板。 这些按钮的功能点如下：

Elements面板

实时编辑DOM节点和CSS样式

Console面板

控制台输出日志

通过JS代码或者命令行console.log()、console.warn() 和console.error()可以将日志信息输出到控制台

控制台交互

在上一小节，我们已经看到可以在控制台输入JS表达式点击Enter即可得到表达式的值，当你在控制台输入命令时，会弹出相应的智能提示框，你可以用Tab自动完成当前的建议项

快捷方式描述
$()返回与指定的CSS选择器相匹配的第一个元素，等同于document.querySelector()
$$()返回与指定的CSS选择器相匹配的所有元素的数组，等同于document.querySelectorAll()
$x()返回与指定的XPath相匹配的所有元素的数组

注： 我在实际操作过程中发现$()并没有按预期返回相匹配的第一个元素，而是返回了所有匹配的元素数组，我也给Google提供了这个issue，等待Google的答复。

Sources面板

你可以在这个面板里面调试你的JS代码，也可以在工作区打开你的本地文件。

调试JS代码

断点可以在DOM元素节点发生改变时、XHR生命周期状态改变时、指定的事件执行时被触发

① DOM元素节点发生改变时

在Elements面板中指定的DOM节点上右击，在弹出的菜单中选择Break on...，可以看到三个选择项，比如我们选择Subtree modifications， 那么当选择的节点里面的子节点被添加、删除、修改，则断点就会被触发。设置方式如下图：

下图是在我的系统里添加指定省市指定医院时由于增加了元素节点而触发的断点，通过单步调试可以看到会弹出一个div对话框供用户添加数据。

② XHR生命周期状态改变时

当XHR生命周期状态发生改变或者XHR的URL与Sources面板右侧的XHR Breakpoints栏设置的字符串匹配时，则断点就会有触发。

③ 指定的事件执行时

在Sources面板右侧的XHR Breakpoints栏下面是Event Listener Breakpoints,列出了各种类型的事件，勾选你要监听的事件， 在指定的事件执行时，断点就会有触发。

Network面板

概述

Network面板可以记录页面上的网络请求的详情信息，从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间、Request和Response等），可以根据这个进行网络性能优化。

我把Google官方网站上介绍Network面板的图贴到这里，该面板主要包括5大块窗格(Pane)：

  1. Controls 控制Network的外观和功能。
  2. Filters 控制Requests Table具体显示哪些内容。
  3. Overview 显示获取到资源的时间轴信息。
  4. Requests Table 按资源获取的前后顺序显示所有获取到的资源信息，点击资源名可以查看该资源的详细信息。
  5. Summary 显示总的请求数、数据传输量、加载时间信息。

其中 Requests Table 显示如下信息列：

捕获屏幕

Controls窗格包括的功能有网络日志录制、日志清理、捕获屏幕、过滤器，视图切换、保留日志开关、Cache开关、网络连接开关、网速阀值。

以捕获屏幕为例，点击摄像机按钮（捕获屏幕），重新加载页面即可捕获屏幕。

双击其中的截屏可以放大显示，在放大的图下方可以点击跳转到上一帧或者下一帧。

单击则可以查看该帧被捕获时的网络请求信息，并且在Overview上会有一条黄色竖线以标记该帧被捕获的具体时间点。

查看DOMContentLoaded和load事件信息

DOMContentLoaded和load这两个事件会高亮显示。

DOMContentLoaded事件会在页面上DOM完全加载并解析完毕之后触发，不会等待CSS、图片、子框架加载完成。 load事件会在页面上所有DOM、CSS、JS、图片完全加载完毕之后触发。

DOMContentLoaded事件在Overview上用一条蓝色竖线标记，并且在Summary以蓝色文字显示确切的时间。

load事件同样会在Overview和Requests Table上用一条红色竖线标记，在Summary也会以红色文字显示确切的时间。

查看具体资源的详情

通过点击某个资源的Name可以查看该资源的详细信息，根据选择的资源类型显示的信息也不太一样，可能包括如下Tab信息：

针对上面4个Tab进行详细讲解一下各个功能：

① 查看资源HTTP头信息

在Headers标签里面可以看到HTTP Request URL、HTTP Method、Status Code、Remote Address等基本信息和详细的Response Headers 、Request Headers以及Query String Parameters或者Form Data等信息。

② 查看资源预览信息

在Preview标签里面可根据选择的资源类型（JSON、图片、文本、JS、CSS）显示相应的预览信息。下图显示的是当选择的资源是JSON格式时的预览信息。

③ 查看资源HTTP的Response信息

在Response标签里面可根据选择的资源类型（JSON、图片、文本、JS、CSS）显示相应资源的Response响应内容。下图显示的是当选择的资源是CSS格式时的响应内容。

④ 查看资源Cookies信息

如果选择的资源在Request和Response过程中存在Cookies信息，则Cookies标签会自动显示出来，在里面可以查看所有的Cookies信息。

⑤ 分析资源在请求的生命周期内各部分时间花费信息

在Timing标签中可以显示资源在整个请求生命周期过程中各部分时间花费信息，可能会涉及到如下过程的时间花费情况：

TTFB这个部分的时间花费如果超过200ms，则应该考虑对网络进行性能优化了

查看资源的发起者(请求源)和依赖项

通过按住Shift并且把光标移到资源名称上，可以查看该资源是由哪个对象或进程发起的（请求源）和对该资源的请求过程中引发了哪些资源（依赖资源）。

在该资源的上方第一个标记为绿色的资源就是该资源的发起者（请求源），有可能会有第二个标记为绿色的资源是该资源的发起者的发起者，以此类推。

在该资源的下方标记为红色的资源是该资源的依赖资源。

Timeline面板

Timeline面板是整个面板里面最复杂的一个面板，涉及的东西比较多。可以利用这个面板来记录和分析网页运行过程中的所有活动行为信息。 你可以充分利用这个面板来分析你的网页的程序性能问题。

概述

下图是从Google官方网站中介绍Timeline面板的图贴到这里，该面板主要包括4大块窗格(Pane)：

  1. Controls 录制开关和控制录制过程中需要记录哪些信息。
  2. Overview 网页性能的概要信息。
  3. Flame Chart CPU堆栈轨迹的可视化图表(火焰图)。在图表里面有1到3条虚竖线。
  4. Details 当选择一个指定的事件后，会显示这个事件的更多信息；当没有选择事件时，会显示指定的时间帧信息。

Flame Chart里面的虚竖线含义：蓝色标记DOMContentLoaded事件；绿色标记第一次的绘制时间点；红色代表load事件。

其中第2块Overview显示了网页性能相关的概要信息，可以通过鼠标或者区域边界上的灰色滑块来拖出一个指定区域范围，Flame Chart会跟着局部放大显示指定区域内的详情信息。

可以通过键盘上的W,S来放大和缩小指定区域，通过A,D来向左或向右移动指定区域。

从Google把图贴到这里，这个窗格包含了三个图表：

  1. FPS 每秒帧数(Frames Per Second)。绿色柱状条越高，则每秒帧数越高。在FPS图表上方的红色块是标记一个长帧。
  2. CPU 标记CPU资源的使用情况，这里的面积图标记着消耗CPU资源的各类事件。
  3. NET 各种颜色的柱状条分别显示一种资源。柱状条越长，代表获取这个资源的时间越长。

CPU面积图中各颜色的含义：蓝色代表HTML文件；黄色代表脚本文件；紫色代表样式文件；绿色代表媒体文件；灰色代表其它杂项文件。

NET图表柱状条两种颜色的含义：较亮的部分表示等待时间（当资源被请求时，直到第一个字节被下载的时间)；较暗的部分表示传输时间(在第一个和最后一个字节被下载之间的时间)。

网页录制详情

支持两种网页录制操作：①录制网页加载，②录制网页交互。为了便于分析，录制的时间不宜太长、还要避免不必要的交互操作、并禁用浏览器的缓存和插件。

当录制完成后，在Flame Chart(火焰图)中点击左侧三角可以展开详情，点击其中的事件或者空白处，可以在Details里面查看该事件或者总的概要信息。

录制中进行JS分析

在录制之前点击Controls中的JS Profile复选框，可以在时间轴中捕获JavaScript的堆栈信息(会产生一定的性能消耗)，并且在Flame Chart(火焰图)中会显示所有被调用的JavaScript函数信息。

录制中捕获截屏

在录制之前点击Controls中的Screenshots复选框，可以在录制过程中捕获截屏，鼠标在Overview上从左向右移动则可以看到录制的动画。

绘制解析

在录制之前点击Controls中的Paint复选框，可以获取绘制事件的更多细节信息（注意这会产生很多的性能消耗）。如果要深入了解网页渲染方面的信息，可以点击DevTools右上角的菜单，在More tools里面选中Rendering settings，这里面包含了如下设置项：

把上面的所有设置项勾选上，网页的显示效果如下：

查询指定事件

你可以通过在DevTools上按Cmd+F(Mac)调出查询框，来查看指定时间区域范围内的指定类型的事件，点击Cmd+G(Mac)或者Cmd+Shift+G(Mac)可以按事件发生的顺序来查询。

图中查询到了4个红色标记着的Parse HTML事件，点击Cmd+G焦点会在这4个事件移动。

运行时性能分析

上面大致介绍了Timeline面板上的各个功能菜单，那么如何去利用该面板去分析和优化网页程序的运行性能呢，由于篇幅限制，就不在这边展开讨论，感兴趣的读者直接到Google开发者文档上查看，Google开发者文档有最权威最新的信息。

Profiles面板

如果Timeline面板所提供的信息不能满足你的要求，可以使用Profiles面板，利用这个面板你可以追踪网页程序的内存泄漏问题，进一步提升程序的JavaScript执行性能。

概述

当前使用的Chrome最新版为54.0.2840.71，这个版本的Profiles面板比之前提供的功能更多也更强大，下面是该面板所包含的功能点：

Record JavaScript CPU Profile简介

通过选择Record JavaScript CPU Profile，然后点击Start，结合你所要分析的具体场景，你可以重新加载网页，或者在网页上进行交互，甚至什么都不操作。最后点击Stop，完成记录操作。

有三种不同的视图可供选择：

我们以Chart视图为例分析一下JS的执行的性能情况：

该视图会以时间顺序展示CPU的性能情况，视图主要分成两块：

视图中的函数颜色不同于其它的面板，这里面的函数颜色标记是随机显示的。然而相同的函数调用颜色标记是相同的。

其中纵轴表示的函数调用堆栈高度仅仅函数的调用嵌套层次比较深，不表示其重要性很高，但是横轴上一个很宽的柱形条则意味着函数的调用需要一个很长的时间去完成，那么你就考虑去做一些优化操作

将鼠标移到Call Stacks中的函数上可以显示函数的名称和时间相关的数据，会提供如下信息：

Take Heap Snapshot简介

通过创建堆快照可以查看创建快照时网页上的JS对象和DOM节点的内存分布情况。利用该工具你可以创建JS的堆快照、内存分析图、对比堆快照以及定位内存泄漏问题。选中Take Heap Snapshot,点击Take Snapshot按钮即可获取快照，在每一次获取快照前都会自动执行垃圾回收操作。

快照最初会存储在渲染进程的内存之中，当我们点击创建快照按钮来查看时才会被传输到DevTools中，当快照被加载到DevTools里面并经过解析之后，在快照标题下方的文字显示是数字就是可访问到的JS对象总的大小。

堆快照提供了不同的视角来进行查看：

Summary视图

该视图会显示所有的对象信息，点击其中的一个对象进行展开可查看更详细的实例信息。鼠标移动到某个对象上会显示该对象实例的详情信息。

图中的各列的具体含义如下：

Shallow size和Retained size的区别？Shallow size是对象本身占用内存的大小，不包含它所引用的对象。Retained size是该对象本身的Shallow size，加上能从该对象直接或者间接访问到对象的Shallow size之和。也就是说Retained size是该对象被GC之后所能回收到内存的总和。

在展开构造函数，则会列出该函数相关的所有对象实例，可以查看该对象的Shallow size和Retained size，在@符号后面的数字是该对象的唯一标识ID。

其中黄色的对象表示在它被某个JS所引用，而红色的对象表示由黄色背景色引用被分离开出的节点。

这些构造函数都代表什么含义呢？

Comparison视图

通过比较多个快照之间的差异来找出内存泄露的对象，为了验证某个程序的操作不会引起内存泄露（通常会执行一个操作后再执行一个对应的相反操作，比如打开一个文档后再关闭它，应该是没有产生内存泄露问题的），你可以执行如下步骤：

  1. 在执行一个操作之前拍一个快照。
  2. 执行一个操作，通过你认为可能会引起内存泄露的一次页面交互操作。
  3. 执行一个相反的操作。
  4. 拍第二个快照，切换到Comparison视图，并与第一个快照进行对比。

切换到Comparison视图之后，就可以看到两个不同的快照之间的差别。

Containment视图

该视图本质上就是应用程序的对象结构的“鸟瞰图”，允许你去深入分析函数的闭包，了解应用程序底层的内存使用情况。

这个视图提供了多个入口：

闭包小建议: 在快照的分析中命名函数的闭包相比匿名函数的闭包更容易区分。

Google上提供的例子和图如下：

function createLargeClosure() {
  var largeStr = new Array(1000000).join('x');

  var lC = function() { // 匿名函数
    return largeStr;
  };

  return lC;
}

function createLargeClosure() {
  var largeStr = new Array(1000000).join('x');

  var lC = function lC() { // 命名函数
    return largeStr;
  };

  return lC;
}

Statistics视图

该视图是堆快照的总的分布统计情况，这个直接上图就可以了：

内存泄露示例

还是把Google提供的内存泄露的小例子贴出来：

DOM内存泄露可能比你想象的要大，考虑一下下面的例子-什么时候#tree节点被释放掉？

  var select = document.querySelector;
  var treeRef = select("#tree");
  var leafRef = select("#leaf");
  var body = select("body");

  body.removeChild(treeRef);

  //由于treeRef #tree不能被释放
  treeRef = null;

  //由于leafRef的间接引用 #tree还是不能被释放

  leafRef = null;
  //现在没有被引用，#tree这个时候才可以被释放了

#leaf节点保持着对它的父节点(parentNode)的引用，这样一直递归引用了#tree节点，所以只有当leafRef被设置成null后，#tree下面的整个树节点才有可能被垃圾回收器回收。

Record Allocation Timeline简介

该工具是可以帮助你追踪JS堆里面的内存泄漏的另一大利器。

选中Record Allocation Timeline按钮，点击Start按钮之后，执行你认为可能会引起内存泄漏的操作，操作之后点击左上角的停止按钮即可。你可以在蓝色竖线上通过缩放来过滤构造器窗格来仅仅显示在指定的时间帧内的被分配的对象。

录制过程中，在时间线上会出现一些蓝色竖条，这些蓝色竖条代表一个新的内存分配，这个新的内存分配都可以会有潜在的内存泄露问题。

通过展开对象并点击它的值则可以在Object窗格中查看更多新分配的对象细节。

Record Allocation Profile简介

从JS函数角度记录并查看内存的分配信息。点击Start按钮，执行你想要去深入分析的页面操作，当你完成你的操作后点击Stop按钮。然后会显示一个按JS函数进行内存分配的分解图，默认的视图是Heavy (Bottom Up)，该视图会把最消耗内存的函数显示在最顶端。

下图是切换到Chart视图时具体的界面，点击任意函数跳转到Sources面板可以查看具体的函数信息。

Application面板

该面板主要是记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。

Frames窗格

在上图中可以查看到顶级的top是一个主文档，在top下面是主文档的Fonts、Images、Scripts、Stylesheets等资源。最后一个就是主文件自身。

在资源上右击后在弹出菜单选择Reveal in Network Panel，就会跳转到Network面板并定位到该资源的位置。

也可以在Sources面板里面按frame类别来查看资源信息。

Security面板

通过该面板你可以去调试当前网页的安全和认证等问题并确保您已经在你的网站上正确地实现HTTPS。

HTTPS（Hyper Text Transfer Protocol over Secure Socket Layer），是以安全为目标的HTTP通道，简单讲是HTTP的安全版。即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。 它是一个URI scheme（抽象标识符体系），句法类同http:体系。用于安全的HTTP数据传输。https:URL表明它使用了HTTP，但HTTPS存在不同于HTTP的默认端口及一个加密/身份验证层（在HTTP与TCP之间）。

SSL(Secure Sockets Layer 安全套接层)，是为网络通信提供安全及数据完整性的一种安全协议。SSL 在传输层对网络连接进行加密，以确保数据在网络传输过程中不被截取及窃听。目前 SSL已被广泛地用于Web浏览器与服务器之间的身份认证和加密数据传输。

简单介绍https、SSL

如果网页是安全的，则会显示这样一条消息：This page is secure (valid HTTPS).。

通过点击View certificate可以查看main origin的服务器证书信息。 点击左侧可以查看指定源的连接和证书详情。

如果网页是不安全的，则会显示：This page is not secure.。

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

点击左侧则提供一个跳转到Network面板视图的链接信息。

中间人攻击(Man-in-the-Middle Attack,”MITM攻击”)是一种“间接”的入侵攻击，这种攻击模式是通过各种技术手段将受入侵者控制的一台计算机虚拟放置在网络连接中的两台通信计算机之间，这台计算机就称为“中间人”。

Audits面板

对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等。

选中Network Utilization、Web Page Performance，点击Run按钮，将会对当前页面进行网络利用率和页面的性能优化作出诊断，并给出相应的优化建议。

本文来自Charlie Chu's Blog

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注