谷歌浏览器Chrome开发者工具详解

╰+哭是因爲堅強的太久メ 2022-10-02 09:59 741阅读 0赞

# Chrome开发者工具详解(1)-Elements、Console、Sources面板 #

## Chrome开发者工具面板 ##

面板上包含了Elements面板、Console面板、Sources面板、Network面板、  
Timeline面板、Profiles面板、Application面板、Security面板、Audits面板这些功能面板。  
![chrome-devtools-panes.png][]  
这些按钮的功能点如下：

*  Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。
 *  Console:记录开发者开发过程中的日志信息，且可以作为与JS进行交互的命令行Shell。
 *  Sources:断点调试JS。
 *  Network:从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化。
 *  Timeline:记录并分析在网站的生命周期内所发生的各类事件，以此可以提高网页的运行时间的性能。
 *  Profiles:如果你需要Timeline所能提供的更多信息时，可以尝试一下Profiles,比如记录JS CPU执行时间细节、显示JS对象和相关的DOM节点的内存消耗、记录内存的分配细节。
 *  Application:记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。
 *  Security:判断当前网页是否安全。
 *  Audits:对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等。
    
    注： 这一篇主要讲解前三个面板Elements、Console、Sources。

## Elements面板 ##

### 实时编辑DOM节点和CSS样式 ###

*  双击DOM树视图里面的节点，可以实时编辑标签属性，修改的效果会立刻反应在浏览器里面

![element1.png][]

*  点击右侧Style面板，可以实时修改CSS的属性值，这里面的所有样式Name和Value都是可以编辑的;在每个属性后面单击可以添加新的样式，如下图：

![element2.png][]

*  点击右侧Computed面板，可以编辑左侧选中的盒子模型参数，所有的值都是可以修改的;点击不同的位置(top、bottom、left、right) 就可以修改元素的padding、border、margin属性值。

![element-computed.png][]

*  查看网页的本地修改历史
 *  点击Styles面板中修改过属性的文件名，会跳转到Source面板
 *  在文件位置右击选择Local modifications,可以查看本地的所有修改记录
 *  点击指定的时间点可以看到粉红背景的删除内容和绿色背景的添加内容

![source1.png][]

## Console面板 ##

### 控制台输出日志 ###

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

*  `console.log` 显示一般的基本日志信息，当要显示的基本日志太多时可以使用`console.group`将相关的日志进行分组
 *  `console.warn` 显示带有黄色小图标的警告信息
 *  `console.error` 显示带有红色小图标的红色的错误信息

![console5.png][]

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

![console4.png][]

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

注： 当需要换到下一行而不是回车的时候，请按`Shift`\+`Enter`。  
![console3.png][]

### 控制台交互 ###

*  JS表达式计算

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

*  选择元素

![console6-select.png][]

<table> 
 <thead> 
  <tr> 
   <th align="center">快捷方式</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">$()</td> 
   <td>返回与指定的CSS选择器相匹配的第一个元素，等同于<code>document.querySelector()</code></td> 
  </tr> 
  <tr> 
   <td align="center">$$()</td> 
   <td>返回与指定的CSS选择器相匹配的所有元素的数组，等同于<code>document.querySelectorAll()</code></td> 
  </tr> 
  <tr> 
   <td align="center">$x()</td> 
   <td>返回与指定的XPath相匹配的所有元素的数组</td> 
  </tr> 
 </tbody> 
</table>

![console-select-element-issue.png][]

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

## Sources面板 ##

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

### 调试JS代码 ###

*  你可以点击JS代码块前面的数字外来设置断点，如果当前代码是经过压缩的话，可以点击下方的花括号`{}`来增强可读性，所有的断点都会列出右侧的断点区。

![sources1.png][]

*  设置断点

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

① DOM元素节点发生改变时

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

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

![sources-dom-changes.png][]

② XHR生命周期状态改变时

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

![sources-xhr.png][]

③ 指定的事件执行时

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

![event-listener.png][]

# Chrome开发者工具详解(2)-Network面板 #

注： 这一篇主要讲解面板Network，参考了Google的相关文档，主要用于公司内部技术分享。

## Chrome开发者工具面板 ##

## Network面板 ##

### 概述 ###

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

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

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

![network-panes.png][]

其中 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`窗格包括的功能有网络日志录制、日志清理、捕获屏幕、过滤器，视图切换、保留日志开关、Cache开关、网络连接开关、网速阀值。

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

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

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

![network-overview-yellow-line.png][]

### 查看DOMContentLoaded和load事件信息 ###

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

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

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

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

![network-domcontentload.png][]

### 查看具体资源的详情 ###

通过点击某个资源的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等信息。

![network-view-header.png][]

② 查看资源预览信息

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

![network-preview.png][]

③ 查看资源HTTP的Response信息

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

![network-response.png][]

④ 查看资源Cookies信息

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

![network-cookies.png][]

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

在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响应数据的时间花费。

![network-timeline.png][]

> TTFB这个部分的时间花费如果超过200ms，则应该考虑对网络进行性能优化了，可以参见[网络性能优化方案][Link 1]及里面的相关参考文档。

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

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

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

![network-initiator2.png][]

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

![network-initiator.png][]

## 参考资料 ##

*  [Measure Resource Loading Times][]
 *  [Understanding Resource Timing][]

# Chrome开发者工具详解(3)-Timeline面板 #

注： 这一篇主要讲解面板Timeline，参考了Google的相关文档，主要用于公司内部技术分享。。

## Timeline面板 ##

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

![timeline.png][]

### 概述 ###

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

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

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

![timeline-annotated.png][]

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

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

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

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

![timeline-overview.png][]

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

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

### 网页录制详情 ###

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

当录制完成后，在Flame Chart(火焰图)中点击左侧三角可以展开详情，点击其中的事件或者空白处，可以在Details里面查看该事件或者总的概要信息。这里面包含的信息量很大，限于篇幅原因，下次有机会再作深入介绍，或者直接到Google上查看[Timeline Event Reference][]这个参考文档。

### 录制中进行JS分析 ###

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

![timeline-jsprofile.png][]

### 录制中捕获截屏 ###

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

![timeline-screenshots.png][]

### 绘制解析 ###

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

![moretools-rendering.png][]

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

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

![timeline-rendering.png][]

### 查询指定事件 ###

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

![timeline-search.png][]

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

### 运行时性能分析 ###

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

## 参考文档 ##

*  [Analyze Runtime Performance][]
 *  [Diagnose Forced Synchronous Layouts][]

# Chrome开发者工具详解(4)-Profiles面板 #

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

## 概述 ##

当前使用的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函数角度记录内存的分配信息。

![profile-panel.png][]

## Record JavaScript CPU Profile简介 ##

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

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

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

![profile-1-chart.png][]

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

![profile-1-heavy.png][]

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

![profile-1-tree.png][]

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

![profile-js-cpu-chart.png][]

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

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

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

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

将鼠标移到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对象总的大小。

![profile-2-overview.png][]

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

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

### Summary视图 ###

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

![profile-2-summary.png][]

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

*  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][ID]。

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

![profile-2-summary2.png][]

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

*  (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视图，并与第一个快照进行对比。

![profile-2-comparison.png][]

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

### Containment视图 ###

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

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

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

![profile-2-containment.png][]

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

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; 
          }

![domleaks.png][]

### Statistics视图 ###

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

![profile-2-statistics.png][]

### 内存泄露示例 ###

还是把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这个时候才可以被释放了

![profile-treegc.png][]

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

## Record Allocation Timeline简介 ##

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

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

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

![profile-3-summary.png][]

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

![profile-3-summary-object.png][]

## Record Allocation Profile简介 ##

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

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

![profile-4-chart.png][]

## 参考文档 ##

*  [Uncovering DOM Leaks][]
 *  [Shallow and retained sizes][]

# Chrome开发者工具详解(5)-Application、Security、Audits面板 #

这篇文章是Chrome开发者工具详解这一系列的最后一篇，介绍DevTools最后的三个面板功能-Application面板、Security面板、Audits面板的基本功能：

## Application面板简介 ##

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

![application-1.png][]

这个面板跟前前面几道硬菜（[Network面板][Network]、[Timeline面板][Timeline]、[Profiles面板][Profiles]）比起来简单多了，这里就稍微作一下介绍：

*  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面板并定位到该资源的位置。

![application-frames-1.png][]  
![application-frames-2.png][]

你也可以在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).。

![secure-1.png][]

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

![secure-3.png][]

![secure-2.png][]

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

![security-4.png][]

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

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

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

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

## Audits面板简介 ##

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

![audits-1.png][]

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

![audits-2.png][]

##     ##

转自：

[http://www.cnblogs.com/charliechu/p/6021141.html][http_www.cnblogs.com_charliechu_p_6021141.html]

[http://zhuchenglin.me/][http_zhuchenglin.me]

# Chrome Developer Tools 中的 Preview 不显示 HTML 的问题： #

[https://developers.google.com/web/updates/2018/02/devtools\#pretty-printing][https_developers.google.com_web_updates_2018_02_devtools_pretty-printing]

[https://bugs.chromium.org/p/chromium/issues/detail?id=785050][https_bugs.chromium.org_p_chromium_issues_detail_id_785050]

[https://groups.google.com/forum/\#!topic/google-chrome-developer-tools/6btEa32ISEA][https_groups.google.com_forum_topic_google-chrome-developer-tools_6btEa32ISEA]

[https://developers.google.com/web/updates/2018/02/devtools\#pretty-printing][https_developers.google.com_web_updates_2018_02_devtools_pretty-printing]

![70][]

![70 1][]

[chrome-devtools-panes.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/chrome-devtools-panes.png
[element1.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/element1.png
[element2.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/element2.png
[element-computed.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/element-computed.png
[source1.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/source1.png
[console5.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/console5.png
[console4.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/console4.png
[console3.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/console3.png
[console6-select.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/console6-select.png
[console-select-element-issue.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/console-select-element-issue.png
[sources1.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/sources1.png
[sources-element-debug2.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/sources-element-debug2.png
[sources-dom-changes.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/sources-dom-changes.png
[sources-xhr.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/sources-xhr.png
[event-listener.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/event-listener.png
[network-panes.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/network-panes.png
[network-overview-yellow-line.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/network-overview-yellow-line.png
[network-domcontentload.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/network-domcontentload.png
[network-view-header.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/network-view-header.png
[network-preview.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/network-preview.png
[network-response.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/network-response.png
[network-cookies.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/network-cookies.png
[network-timeline.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/network-timeline.png
[Link 1]: http://zhuchenglin.me/performance-optimization-in-action
[network-initiator2.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/network-initiator2.png
[network-initiator.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/network-initiator.png
[Measure Resource Loading Times]: https://developers.google.com/web/tools/chrome-devtools/network-performance/resource-loading
[Understanding Resource Timing]: https://developers.google.com/web/tools/chrome-devtools/network-performance/understanding-resource-timing
[timeline.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/timeline.png
[timeline-annotated.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/timeline-annotated.png
[timeline-overview.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/timeline-overview.png
[Timeline Event Reference]: https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/performance-reference
[timeline-jsprofile.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/timeline-jsprofile.png
[timeline-screenshots.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/timeline-screenshots.png
[moretools-rendering.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/moretools-rendering.png
[timeline-rendering.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/timeline-rendering.png
[timeline-search.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/timeline-search.png
[Analyze Runtime Performance]: https://developers.google.com/web/tools/chrome-devtools/rendering-tools/
[Diagnose Forced Synchronous Layouts]: https://developers.google.com/web/tools/chrome-devtools/rendering-tools/forced-synchronous-layouts
[profile-panel.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/profile-panel.png
[profile-1-chart.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/profile-1-chart.png
[profile-1-heavy.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/profile-1-heavy.png
[profile-1-tree.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/profile-1-tree.png
[profile-js-cpu-chart.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/profile-js-cpu-chart.png
[profile-2-overview.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/profile-2-overview.png
[profile-2-summary.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/profile-2-summary.png
[ID]: mailto:%E5%9C%A8@%E7%AC%A6%E5%8F%B7%E5%90%8E%E9%9D%A2%E7%9A%84%E6%95%B0%E5%AD%97%E6%98%AF%E8%AF%A5%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%94%AF%E4%B8%80%E6%A0%87%E8%AF%86ID
[profile-2-summary2.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/profile-2-summary2.png
[profile-2-comparison.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/profile-2-comparison.png
[profile-2-containment.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/profile-2-containment.png
[domleaks.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/domleaks.png
[profile-2-statistics.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/profile-2-statistics.png
[profile-treegc.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/profile-treegc.png
[profile-3-summary.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/profile-3-summary.png
[profile-3-summary-object.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/profile-3-summary-object.png
[profile-4-chart.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/profile-4-chart.png
[Uncovering DOM Leaks]: https://developer.chrome.com/devtools/docs/heap-profiling-dom-leaks
[Shallow and retained sizes]: https://www.yourkit.com/docs/java/help/sizes.jsp
[application-1.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/application-1.png
[Network]: http://zhuchenglin.me/chrome-devtools-in-depth-2
[Timeline]: http://zhuchenglin.me/chrome-devtools-in-depth-3
[Profiles]: http://zhuchenglin.me/chrome-devtools-in-depth-4
[application-frames-1.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/application-frames-1.png
[application-frames-2.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/application-frames-2.png
[secure-1.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/secure-1.png
[secure-3.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/secure-3.png
[secure-2.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/secure-2.png
[security-4.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/security-4.png
[audits-1.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/audits-1.png
[audits-2.png]: http://charlie-blog.oss-cn-shanghai.aliyuncs.com/audits-2.png
[http_www.cnblogs.com_charliechu_p_6021141.html]: http://www.cnblogs.com/charliechu/p/6021141.html
[http_zhuchenglin.me]: http://zhuchenglin.me/
[https_developers.google.com_web_updates_2018_02_devtools_pretty-printing]: https://developers.google.com/web/updates/2018/02/devtools#pretty-printing
[https_bugs.chromium.org_p_chromium_issues_detail_id_785050]: https://bugs.chromium.org/p/chromium/issues/detail?id=785050
[https_groups.google.com_forum_topic_google-chrome-developer-tools_6btEa32ISEA]: https://groups.google.com/forum/#!topic/google-chrome-developer-tools/6btEa32ISEA
[70]: /images/20220113/68ec1a69f0f8491fa0f7d273dec872a7.png
[70 1]: /images/20220113/73466d2780484aceaf6aa28d7f4d35f0.png