chrome浏览器开发者工具（F12/ctrl+shift+i）

参考博客：

【爬虫知识】浏览器开发者工具使用技巧总结

Chrome开发者工具面板

总览

浏览器开发者工具在爬虫中常用来进行简单的抓包分析、JS逆向调试，打开方式：

1. F12；
2. 快捷键 Ctrl+Shift+I；
3. 鼠标右键检查或者审查元素；
4. 浏览器右上角 —> 更多工具 —> 开发者工具

常见禁用开发者工具手段：https://blog.csdn.net/cplvfx/article/details/108518077

官方文档：https://developer.chrome.com/docs/devtools/

面板上包含了Elements面板、Console面板、Sources面板、Network面板、Timeline面板、Profiles面板、Application面板、Security面板、Audits面板这些功能面板。

各面板对应的功能：

• Elements（元素面板）:用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。css可以即时修改，即时显示。大大方便了开发者调试页面

• Console（控制台面板）:控制台一般用于执行一次性代码，查看JavaScript对象，查看调试日志信息或异常信息。还可以当作JavascriptAPI查看用。

• Sources（源代码面板）:该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码，此外最重要的是可以调试JavaScript源代码，可以给JS代码添加断点等。

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

• Performance（性能面板）:使用时间轴面板，可以通过记录和查看网站生命周期内发生的各种事件来提高页面运行时的性能。

• Memory（内存面板）：分析 web 应用或者页面的执行时间以及内存使用情况。

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

• Security（安全面板）:使用安全面板调试混合内容问题，证书问题等等。

• Lighthouse（诊断面板）：对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。

• 元素选择：可以直接点击页面的元素，会自动跳转到对应的源代码。

• 终端模拟：模拟各种终端设备，支持自定义终端。

  点击 可以模拟各种终端设备，适合查看手机页面的数据，点击【More tools】—> 【Sensors】可以模拟终端的地理位置、终端朝向等；工具栏可以选择要模拟的终端型号，其中 Responsive 是自适应。

• 设置：开发者工具设置，包括一些外观、快捷置、终端设备、地理位置设置等。

• 自定义：自定义和控制开发者工具，包括调整工具的位置、全局搜索、运行命令、其他工具等。

Elements面板

• 查看元素的代码：点击左上角的箭头图标（或按快捷键Ctrl+Shift+C）进入选择元素模式，然后从页面中选择需要查看的元素，然后可以在开发者工具元素（Elements）一栏中定位到该元素源代码的具体位置
• 查看元素的属性：定位到元素的源代码之后，可以从源代码中读出改元素的属性。如下图中的class、src、width等属性的值。

• 当然从源代码中读到的只是一部分显式声明的属性，要查看该元素的所有属性，可以在右边的侧栏中查看：

• 修改元素的代码与属性：点击元素，然查看右键菜单，可以看到chrome提供的可对元素进行的操作：包括编辑元素代码（Edit as HTML）、修改属性（Add attribute、Edit attribute）等。选择Edit as HTML选项时，元素进入编辑模式，可以对元素的代码进行任意的修改。当然，这个修改也仅对当前的页面渲染生效，不会修改服务器的源代码，故而这个功能也是作为调试页面效果而使用。
  
• 查看元素的CSS属性：在元素的右边栏中的styles页面可以查看该元素的CSS属性，这个页面展示该元素原始定义的CSS属性以及从父级元素继承的CSS属性。从这个页面还可以查到该元素的某个CSS特性来自于那个CSS文件，使编码调试时修改代码变得非常方便。
  
• 在Styles页旁边，有一个Computed页面，这个页面展示该元素经过计算之后的所有CSS属性，即最后浏览器渲染页面时使用的属性。属性的计算由浏览器自动进行，是浏览器渲染页面的一个必不可少的过程。
  
• 修改元素的CSS属性：在元素的Styles页面，可以对元素的CSS属性进行修改，甚至删除原有、添加新属性。不过，这些修改，仅对当前浏览器的页面展示生效，不会修改CSS源代码。所以在这里进行CSS属性的修改一般用来调整和完善元素的渲染效果。
• 给元素添加断点：在元素的右键菜单中选择断点选项（Break on…），选中之后，当元素被修改（通常是被JS代码修改）时，页面加载会暂停，然后可以查看该元素的属性。
  
• 元素断点添加之后，可以在右侧栏的DOM Breakpoints页面中看到，这个页面可以看到当前网页的所有元素断点。

• 查看元素的监听事件：元素的右边栏的Event Listener页面，可以查看到该元素的所有监听事件。在开发中，尤其是维护其他人的代码时，会出现不了解元素对应的监听事件，这个时候，可以在这个页面中找到。这个页面不仅能看到对应的事件函数，还可以定位该函数所在的JS文件以及在该文件中的具体位置（行数），大大提高开发维护的效率。
  

Console面板

控制台输出日志

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

• console.log 显示一般的基本日志信息，当要显示的基本日志太多时可以使用console.group将相关的日志进行分组

• console.warn 显示带有黄色小图标的警告信息

• console.error 显示带有红色小图标的红色的错误信息

• console.assert 当第一个参数为false时，才会显示第一个参数的值

• 可以根据JS条件判断输出不同的日志信息

注： 当需要换到下一行而不是回车的时候，请按Shift+Enter。

在 console 中输入如下代码，如只打印 _$ 开头的变量值：

for (var p in window) {
    if (p.substr(0, 2) !== "_$") 
        continue;
    console.log(p + " >>> " + eval(p))
}

控制台交互

• JS表达式计算

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

• 选择元素

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

Sources面板

• 查看文件：在源代码（Source）页面可以查看到当前网页的所有源文件。在左侧栏中可以看到源文件以树结构进行展示。

• 添加断点：在源代码左边有行号，点击对应行的行号，就好给改行添加上一个断点（再次点击可删除断点）。右键点击断点，在弹出的菜单中选择Edit breakpoint可以给该断的添加中断条件。

• 中断调试：添加断点后，当JS代码运行到断点时会中断（对于添加了中断条件的断点在符合条件时中断），此时可以将光标放在变量上查看变量的

• 也可以在右边的侧栏上查看：

• 在右侧变量上方，有继续运行、单步跳过等按钮，可以在当前断点后，逐行运行代码，或者直接让其继续运行。

常规断点调试

适用于分析关键函数代码逻辑

操作方式：

1. Ctrl+Shift+F 或者右上角三个点打开全局搜索，搜索关键字。
2. 定位到可疑代码，点击行号埋下断点。
3. 调试代码，分析逻辑，其中 console 模板可以直接编写 JS 代码进行调试。

调试设置：

各个选项功能：

• 执行到下一个断点
• 执行下一步，不会进入所调用的函数内部
• 进入所调用的函数内部
• 跳出函数内部
• 一步步执行代码，遇到有函数调用，则进入函数
• 停用断点
• 不要在出现异常时暂停
• Breakpoints：可以看到已经埋下的断点。
• Scope：可以看到当前局部或者全局变量的值，可对值进行修改。
• Call Stack：可以看到当前代码调用的堆栈信息，代码执行顺序为由下至上。

XHR 断点

匹配 url 中关键词，匹配到则跳转到参数生成处，适用 于url 中的加密参数全局搜索搜不到，可采用这种方式拦截。

行为断点

Event Listener Breakpoints，事件侦听器断点，当鼠标点击、移动、键盘按键等行为或者其他事件发生时可以触发断点，比如 Mouse —> click，可快速定位点击按钮后，所执行的 JS。

插入 JS

在 sources —> snippets 下可以新建 JS 脚本。

Network面板

概述

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

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

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

Controls 控制器

• ：记录按钮 处于打开状态时会在此面板进行网络连接的信息记录，关闭后则不会记录。
• ：清除按钮 清除当前的网络连接记录信息。（点击一下就能清空）
• ：捕获截屏 记录页面加载过程中一些时间点的页面渲染情况，截图根据可视窗口截取，如下图所示。

• ：过滤器 能够自定义筛选条件，找到自己想要资源信息，如下图所示。

也可以是一些指定条件，指定条件有哪些？

​ domain：资源所在的域，即url中的域名部分。如 domain:api.github.com

​ has-response-header：资源是否存在响应头，无论其值是什么。如 has-response-header：Access-Control-Allow-Origin

​ is：当前时间点在执行的请求。当前可用值：running

​ larger-than：显示大于指定值大小规格的资源。单位是字节(B),但是K(kB)和M(MB)也是可以的~ 如larger-than:150K

​ method：使用何种HTTP请求方式。如 GET

​ mime-type：也写作content-type，是资源类型的标识符。如 text/html

​ scheme：协议规定。如 HTTPS

​ set-cookie-name：服务器设置的cookies名称

​ set-cookie-value：服务器设置的cookies的值

​ set-cookie-domain：服务器设置的cookies的域

​ status-code：HTTP响应头的状态码

• ：搜索
• ：Network conditions，网络条件，允许在各种网络环境中测试网站，包括 3G，离线等，还可以自定义限制最大下载和上传流量
• ：Import/Export HAR file，导入导出抓包数据。
• ：显示详细信息

• ：显示时间流

能够根据时间，查看对应时间下 浏览器请求的资源信息

• ：是否保留日志

  当选择保留日志，重新加载url当前界面时，之前请求显示的资源信息，会保留下来，不会清空的哟~

• ：是否进行缓存

  当打开开发者工具时生效，打开这个开关，则页面资源不会存入缓存，可以从Status栏的状态码看文件请求状态。

• ：设置模拟限速，如下图所示。

  

  设置限速可以模拟处于各种网络环境下的不同用户访问本页面的情况。

Filter 过滤器

• Hide data URLs：data URLs 指一些嵌入到文档中的小型文件，在请求表里面以 data: 开头的文件就是，如较为常见的 svg 文件。勾选 Hide data URLs复选框即可隐藏此类文件。
• All：显示所有请求。
• XHR：全称 XMLHttpRequest，是一种创建 AJAX 请求的 JavaScript API，通常抓取 Ajax 请求可以选择 XHR。
• WS：全称 WebSocket，是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
• Manifest：安卓开发文件名，属于 AndroidManifest.xml 文件，在简单的 Android 系统的应用中提出了重要的信息码。
• Has blocked cookies：仅显示具有阻止响应 cookie 的请求。
• Blocked Requests：只显示被阻止的请求。

请求列表

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

• Name 资源名称，点击名称可以查看资源的详情情况，包括Headers、Preview、Response、Cookies、Timing。
• Status HTTP状态码。
• Type 请求的资源MIME类型。
• Initiator 标记请求是由哪个对象或进程发起的（请求源）。
• Parser： 请求由Chrome的HTML解析器时发起的。
• Redirect：请求是由HTTP页面重定向发起的。
• Script：请求是由Script脚本发起的。
• Other：请求是由其他进程发起的，比如用户点击一个链接跳转到另一个页面或者在地址栏输入URL地址。
• Size 从服务器下载的文件和请求的资源大小。如果是从缓存中取得的资源则该列会显示(from cache)
• Time 请求或下载的时间，从发起Request到获取到Response所用的总时间。
• Timeline 显示所有网络请求的可视化瀑布流(时间状态轴)，点击时间轴，可以查看该请求的详细信息，点击列头则可以根据指定的字段可以排序。

捕获屏幕（Controls ）

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

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

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

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

查看DOMContentLoaded和load事件信息

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

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

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

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

查看具体资源的详情

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

• Headers 该资源的HTTP头信息。
• Preview 根据你所选择的资源类型（JSON、图片、文本）显示相应的预览。
• Response 显示HTTP的Response信息。
• Cookies 显示资源HTTP的Request和Response过程中的Cookies信息。
• Timing 显示资源在整个请求生命周期过程中各部分花费的时间。

针对上面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标签中可以显示资源在整个请求生命周期过程中各部分时间花费信息，可能会涉及到如下过程的时间花费情况：

• Queuing 排队的时间花费。可能由于该请求被渲染引擎认为是优先级比较低的资源（图片）、服务器不可用、超过浏览器的并发请求的最大连接数（Chrome的最大并发连接数为6）.
• Stalled 从HTTP连接建立到请求能够被发出送出去(真正传输数据)之间的时间花费。包含用于处理代理的时间，如果有已经建立好的连接，这个时间还包括等待已建立连接被复用的时间。
• Proxy Negotiation 与代理服务器连接的时间花费。
• DNS Lookup 执行DNS查询的时间。网页上每一个新的域名都要经过一个DNS查询。第二次访问浏览器有缓存的话，则这个时间为0。
• Initial Connection / Connecting 建立连接的时间花费，包含了TCP握手及重试时间。
• SSL 完成SSL握手的时间花费。
• Request sent 发起请求的时间。
• Waiting (Time to first byte (TTFB)) 是最初的网络请求被发起到从服务器接收到第一个字节这段时间，它包含了TCP连接时间，发送HTTP请求时间和获得响应消息第一个字节的时间。
• Content Download 获取Response响应数据的时间花费。

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里面查看该事件或者总的概要信息。这里面包含的信息量很大，限于篇幅原因，下次有机会再作深入介绍，或者直接到Google上查看Timeline Event Reference这个参考文档。

录制中进行JS分析

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

录制中捕获截屏

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

绘制解析

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

• Paint Flashing 高亮显示网页中需要被重绘的部分。
• Layer Borders 显示Layer边界。
• FPS Meter 每一秒的帧细节，帧速率的分布信息和GPU的内存使用情况。
• Scrolling Performance Issues 分析鼠标滚动时的性能问题，会显示使屏幕滚动变慢的区域。
• Emulate CSS Media 仿真CSS媒体类型，查看不同的设备上CSS样式效果，可能的媒体类型选项有print、screen。

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

查询指定事件

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

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

运行时性能分析

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

Profiles面板

概述

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

• Record JavaScript CPU Profile 用于分析网页上的JavaScript函数在执行过程中的CPU消耗信息。
• Take Heap Snapshot 创建堆快照用来显示网页上的JS对象和相关的DOM节点的内存分布情况。
• Record Allocation Timeline 从整个Heap角度记录内存的分配信息的时间轴信息，利用这个可以实现隔离内存泄漏问题。
• Record Allocation Profile 从JS函数角度记录内存的分配信息。

Record JavaScript CPU Profile简介

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

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

• Chart 按时间先后顺序显示的火焰图。

• Heavy(Bottom Up) （自底向上）根据对性能的消耗影响列出所有的函数，并可以查看该函数的调用路径。

  

• Tree(Top Down) (自顶向下) 从调用栈的顶端（最初调用的位置）开始，显示调用结构的总体的树状图情况。

  

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

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

• Overview 整个录制结果的鸟瞰图（概览），柱形条的高度对应了调用堆栈的深度，也就是说柱形条高度越高，调用堆栈的深度越深。
• Call Stacks 在录制过程中被调用的函数的深入分析视图（调用堆栈），横轴表示时间，纵轴表示调用栈，自上而下的表示函数的调用情况。也就是说上面的函数调用在它下面的函数。

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

其中纵轴表示的函数调用堆栈高度仅仅函数的调用嵌套层次比较深，不表示其重要性很高，但是横轴上一个很宽的柱形条则意味着函数的调用需要一个很长的时间去完成，那么你就考虑去做一些优化操作，具体可以参见网络性能优化方案及里面的相关参考文档。

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

• Name 函数名称
• Self time 函数的本次调用运行的时间，仅仅包含该函数本身的运行时间，不包含它所调用的子函数的时间。
• Total time 函数的本次调用运行的总时间，包含它所调用的子函数的运行时间。
• URL 函数定义在文件中所在的位置，其格式为file.js:100，表示函数在file.js文件中的第100行。
• Aggregated self time 在这次的录制过程中函数调用运行的总时间，不包含它所调用的子函数的时间。
• Aggregated total time 在这次的录制过程中所有的函数调用运行的总时间，包含它所调用的子函数的时间。
• Not optimized 如果优化器检测到该函数有潜在的优化空间，那么该函数会被列在这里。

Take Heap Snapshot简介

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

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

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

• Summary 该视图按照构造函数进行分组，用它可以捕获对象和它们使用的内存情况，对于跟踪定位DOM节点的内存泄漏特别有用。
• Comparison 对比两个快照的差别，用它可以对比某个操作前后的内存快照。分析操作前后的内存释放情况以及它的引用计数，便于你确认内存是否存在泄漏以及造成的原因。
• Containment 该视图可以探测堆的具体内容，它提供了一个更适合的视图来查看对象结构，有助于分析对象的引用情况，使用它可以分析闭包和进行更深层次的对象分析。
• Statistics 统计视图。

Summary视图

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

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

• Constructor 显示所有的构造函数，点击每一个构造函数可以查看由该构造函数创建的所有对象。
• Distance 显示通过最短的节点路径到根节点的距离。
• Objects Count 显示对象的个数和百分比。
• Shallow size 显示由特定的构造函数创建的所有对象的本身的内存总数。
• Retained size 显示由该对象及其它所引用的对象的总的内存总数。

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

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

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

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

• (global property) 全局对象（比如window）和通过它引用的对象之间的中间对象，如果一个对象是由Person构造函数生成并被全局对象所引用，那么它们的引用路径关系就像这样[global] > (global property) > Person。这跟常规的对象之间直接引用相比，采用中间对象主要是考虑性能的原因。全局对象的改变是很频繁的，而非全局变量的属性访问最优化方案对全局变量是不适用的。
• (roots) 它们可以是由引擎自己的目标创建的一些引用，这个引擎可以缓存引用的对象，但所有的这些引用都是弱引用，它们不会阻止引用对象被回收。
• (closure) 一些函数闭包中的一组对象的引用。
• (array, string, number, regexp) 一系属性引用了数组(Array),字符串(String),数字(Number)或正则表达式的对象类型。
• HTMLDivElement, HTMLAnchorElement, DocumentFragment等 你的代码中对元素(elements)的引用或者指定的document对象的引用。

Comparison视图

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

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

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

Containment视图

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

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

• DOMWindow objects DOMWindow对象，即JS代码全局对象。
• Native objects 浏览器原生对象，比如DOM节点，CSS规则。

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

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");  //由于treeRef #tree不能被释放  treeRef = null;
var leafRef = select("#leaf");  //由于leafRef的间接引用 #tree还是不能被释放   leafRef = null;
var body = select("body");   
body.removeChild(treeRef);      //现在没有被引用，#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）、缓存数据、字体、图片、脚本、样式表等。

• Local Storage 如果你在开发过程中使用了local storage来存储键值对(KVPs)，那么你就可以通过Local Storage窗格来检查、新增、修改、删除这个键值对。
• Application Cache 你可以使用Application Cache窗格去查看通过Application Cache API创建的资源。
• Frames 将页面上的资源按frame类别进行组织显示。

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之间）。

HTTPS和HTTP的区别主要为以下四点：
① https协议需要到CA申请证书，一般免费证书很少，需要交费。
② http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
③ http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
④ http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

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

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

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

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

• 如果被请求的页面通过HTTP提供服务，那么这个主源就会被标记为不安全。
• 如果被请求的页面是通过HTTPS获取的，但这个页面接着通过HTTP继续从其他来源检索内容，那么这个页面仍然被标记为不安全。这就是所谓的混合内容页面,混合内容页面只是部分受到保护,因为HTTP内容(非加密的内容)可以被嗅探者入侵,容易受到中间人攻击。

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

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

Audits面板

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

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

本栏目推荐文章
• node版本管理工具推荐
• spark 3.x idea linux远程开发环境搭建
• Nocalhost 为 KubeSphere 提供更强大的云原生开发环境
• Next.js 开发指南 路由篇 | App Router
• Next.js 开发指南 初始篇 | Next.js CLI
• webdriver.Chrome New API
• 微信对话平台API开发
• 05_OLED调试工具
• JS常用工具：Webpack 和 JShaman分别有什么用？
• 【JProfile】JProfile工具

开发者 浏览器 工具 chrome F12开发者 浏览器 工具chrome 开发者javascript工具chrome 开发者 工具 数据chrome 开发者 性能 工具chrome chrome开发工具 功能 工具 开发者 浏览器 工具 开发者 浏览器 工具 数据 f-string python string 3.12 浏览器chrome webdriver浏览器chrome