Chrome 开发者调试常用工具

玫瑰花开一片一片

已于 2023-06-21 16:12:23 修改

阅读量3.1k

点赞数 1

文章标签： javascript html css

于 2023-06-21 15:12:04 首次发布

本文链接：https://blog.csdn.net/q515656712/article/details/131328130

版权

Chrome调试工具介绍

①②③④⑤⑥⑦⑧⑨⑩

一、Elements-元素

选项说明

styles

filter搜索框：查找过滤样式，包括class名
当前选中的元素查看其伪类效果已经样式
给当前选中元素添加class名
可以把当前元素class名或者id，按照css层级添加一条class样式
分离元素预览图位置
css、style 即时添加位置

computed

元素边框，宽高预览图，并可以双击修改图中数值
当前元素样式搜索框
快速定位当前样式位置并在 styles⑥ 中显示

Layout

Layout 只对 grid布局有作用

show trak sizes：显示区域大小

show area names：显示透过grid-template-areas 定义的名称

extend grid lines：显示其他区域块的网络线

由于该功能使用率很低：感兴趣可以用以下代码自行查看更多效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  </div>
  <div class="container2">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  </div>
  <div class="container3">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  </div>
  <style>
    .container {
      display: inline-grid;
      grid-template-columns: repeat(auto-fill, minmax(20px, 1fr));
      grid-template-rows: 120px 100px;
      grid-template-areas:
        "h1 h2 h3"
        "h4 h5 h6";
      grid-auto-columns: 100px;
      grid-gap: 10px;
    }
    .container > div:nth-child(1) {
      grid-area: h1;
    }
    .container > div:nth-child(2) {
      grid-area: h3;
    }
    .container > div:nth-child(3) {
      grid-area: h2;
    }
    .container > div:nth-child(4) {
      grid-area: h4;
    }
    .container > div:nth-child(5) {
      grid-area: h5;
    }
    .container > div:nth-child(6) {
      grid-area: h6;
    }
 
 
    .container2 {
      display: inline-grid;
      grid-template-columns: repeat(auto-fill, minmax(20px, 1fr));
      grid-template-rows: 120px 100px;
      grid-template-areas:
        "h1 h2 h3"
        "h4 h5 h6";
      grid-auto-columns: 100px;
      grid-gap: 10px;
    }
    .container2 > div:nth-child(1) {
      grid-area: h1;
    }
    .container2 > div:nth-child(2) {
      grid-area: h3;
    }
    .container2 > div:nth-child(3) {
      grid-area: h2;
    }
    .container2 > div:nth-child(4) {
      grid-area: h4;
    }
    .container2 > div:nth-child(5) {
      grid-area: h5;
    }
    .container2 > div:nth-child(6) {
      grid-area: h6;
    }
    .container3 {
      display: flex;
    }
  </style>
</body>
</html>

Event Listeners

主要功能：显示选中元素下的事件

点击事件具有冒泡行为，是否将冒泡到此元素的事件一并显示
不勾选如果事件绑定了第三方库（JQuery）点击序号④的链接会跳转相应源码，否则跳转链接将会显示自己写的代码（使用原生是否勾选此项无变化）
删除此事件，页面中相应的按钮将失效
跳转并显示相应的代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="btn1">点击我</button>
  <div id="btn2">
    <div>children</div>
  </div>
  <div id="btn3"></div>
  <script>
    document.getElementById('btn1').onclick = () => {
      alert('click')
    }
    document.getElementById('btn2').onclick = () => {
      alert('parent click')
    }
    let obtn = document.getElementById('btn3')
    obtn.onclick = () => {}
    obtn.onfocus = () => {}
    obtn.onkeyup = () => {}
    obtn.onmouseout = () => {}
  </script>
</body>
</html>

DOM Breakpoints

主要功能：给元素打断点debug

在要打断点的元素上鼠标右键 Break on > subtree|attrbute|node 三个模式可选并添加到DOM Breakpoints 列表中，加入列表中后可以选择是否启用
当元素树结构发生变化时会断点进入debug模式
当元素有被删除的动作时会断点进入debug模式
当元素属性有被修改动作时会断点进入 debug模式

Properties

主要功能： Properties 在开发过程中使用率很低，其功能也只是展示选中元素相关的dom信息，以及所属的一些dom信息

Accessibility

主要功能：无障碍开发过程中显示相关信息 Web内容无障碍指南（WACG）

网页中 aria-label 无障碍属性使用

用来调试无障碍功能！

二、Console

选项说明

console

主要功能：记录开发者开发过程中的日志信息，且可以作为与JS进行交互的命令行Shell

展开Console 信息类型列表
清空所有 Console信息
切换页面（当前网页内出现多个iframe 可用此切换页面）

监听js代码，可输入一段js代码（输入Date.now() 会一直监听时间变化）

有意义的监听demo

Console监听代码：
monitorEvents(document.getElementById('button'))
 
html页面：
<button id="button">鼠标移动到我这里可以监听到事件</button>

过滤Console 信息
单选可以调整要显示哪些Level 的信息，预设只有Verbose 不会显示
设置显示信息 Console - Messages & Settings 介绍
1. Preserve log：控制台将会在页面刷新或者跳转时不清空记录。
2. Selected context only ：勾上后可以根据前面 top 选择的上下文来指定控制台的日志记录范围。
3. User messages only ：隐藏浏览器产生的访问异常之类的警告。
4. Group similar : 合并重复的Console
5. Eager evaluation：实时显示表达式的执行结果
6. Log XMLHttpRequests ：顾名思义，记录 XMLHttpRequest 产生的信息。
7. Show timestamps ：在控制台中显示时间戳信息。
8. Evaluate triggers user activation：为了资安考量和使用者体验，浏览器中有些API是无法直接靠JavaScript触发的，例如有声影片自动播放、开启popup、下载档案等等
9. Autocomplete from history ： Chrome 会记录你曾经输入过的命令，进行自动补全。
Console 信息显示 / 输入代码执行

三、Sources-来源

选项说明

主要功能：Sources面板主要用于查看web站点的资源列表及javascript代码的debug

文件列表：展示当前页面内所引用资源的列表，和平常的文件tree一样

内容区域：可在该区域查看打开的文件的脚本，也可以在区域内下断点，打断指定执行代码行。

代码格式：当文件是压缩文件的时候，代码往往是一行的，点击该按钮即可显示规范的代码格式。

代码位置：显示当前焦点在几行几列。

按钮介绍：

continue：继续执行代码，直到遇到另一个断点。
step_over：按正常步骤，应该会一行一行的执行相关代码，以便深入探索哪些代码影响着正在更新的变量。如果你的代码中调用了另一个函数，点击此按钮将不会进入该函数，而是直接略过，将焦点留在当前函数上。
step_into：进入被调用的函数并且调试器将将其执行到该函数定义中的第一行。
step_out：在已进入一个函数后，单击此按钮将导致函数定义的其余部分的运行，调试器将将其执行到父函数。
disable-breakpoints：控制断点开/关的按钮。
pause-gray：在异常处产生断点。

变量监听Watch：对加入监听列表的变量进行监听, 在该面板的右侧有添加变量和刷新变量列表的按钮。

函数调用堆栈 Call Stack：函数调用堆栈显示了一条完整的导致代码被暂停的执行路径，让我们深入了解导致错误的原因。

上图在fnC下断点，该面板显示fnC函数的执行路径，分别是从fnA调用fnB，fnB再调用fnA，并且函数调用堆栈列表中还有每一步调用分别在哪个文件和在文件的第几行。

作用域 Scope：当前断点所在函数执行的作用域内容。

1.断点在Obj.fnV()上时，作用域在 window上

2.断点在 console.log('fnD') 时作用域在Obj对象上

断点方式：

在脚本中写入debugger

demo:

var num = 1;
console.log(num);
debugger;

在Sources面板文件内标注断点。
1. Add breakpoint：添加断点
2. Add conditional breakpoint ：添加条件断点（点击后可以在条件窗口里写js代码）
3. Add logpoint：添加log。与console.log() 功能相同（点击后可以直在输入框内写打印的变量或直接输入数字同时也支持js表达式）
4. Never pause here （暂时查到的功能只是作为标记不起任何作用，添加后可以右键编辑与（b）功能相同）
5. Blackbox script （js代码调试时会遇到第三方库文件，可以用此功能绕过这些库文件）

断点列表 Breakpoints：展示断点列表，将每个断点所在文件/行数/改行简略内容展示。

DOM断点列表 DOM Breakpoints：请参考 Elements

请求断点列表 XHR/fetch Breakpoints：对达到满足过滤条件的请求进行断点拦截，点击该面板右侧加号按钮，会跳出"Break when URL contains"以填写过滤条件。

可断点的事件监听列表 Event Listener Breakpoints：打开这个列表，可以在监听事件并且在触发该事件时进入断点，调试器会停留在触发事件代码行。只需要展开事件列表，选择要监听的事件打上勾即可。

显示全局监听器 Global Listeners ：在浏览器中 window 是全局对象，所以在 Global Listeners 面板中显示绑定在 window 对象上的事件监听。

四、VScode Debugger

选项说明

主要功能：可以在 VSCode 中进行Debugger调试

VSCode安装插件：

切换到中搜索并添加 Debugger for Chrome 插件
切换到选项中点击红色框选图标进入配置文件（Vue 官方文档）

配置代码：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome", // 谷歌浏览器
      "request": "launch",
      "name": "vuejs: chrome", // 配置项的名称 （用于辨识）
      "url": "http://localhost:8080",  // 此端口号 与项目启动端口号 要一致
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    },
    {
      "type": "firefox", // 火狐浏览器浏览器
      "request": "launch",
      "name": "vuejs: firefox",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
    }
  ]
}

使用方法：

切换并选择对应的配置项按F5 开始调试页面
对应Chrome 调试的 Scope面板
对应Chrome 调试的 Watch面板
对应Chrome 调试的 Call Stack 面板
可以快速查找项目中使用断点的地方类似Chrome 调试的 XHR/fetch Breakpoints 面板
可以添加删除断点
对应 Chrome 浏览器 Console控制台

五、Network-网络

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

选项

说明

控制Network的外观和功能

是否开启 Network 日志
清空 Network 日志
过滤 Network 日志工具栏
搜索功能
模拟网络速度 / 可点击 add... 自定义上下行速度
HTTP存档格式（HTTP Archive format），是一种JSON格式的存档文件格式，用于记录网页浏览器与网站的交互过程。文件扩展名通常为.har 【通常这种操作过程叫做抓包】（保存/导入功能）详细使用方法
设置功能
1. Use large request rows：请求列表处详细显示
2. Group by frame：如果页面中有frame 框架将会在 Network 日志列表中折叠显示（方便查找和查看）
3. Show overview：显示/隐藏 Network时间线图
4. Capture screenshots：自动分析DOM树的变化，截下DOM树变化各个重要阶段时的页面，尚不清楚是如何判断截图时机的

Preserve log：跳转页面时是否保留之前 Network 日志

Disable cache：禁用/开启缓存机制（开启可能会导致一些数据不被更新）

Network 日志过滤

filter 输入框：手动过滤

Hide data URLs：在 Network 日志中列表显示/隐藏（data:image/png;base64，....）链接信息

All：显示所有日志

XHR：只显示ajax中的请求

JS：只显示JS链接信息

CSS：只显示 css链接信息

img：只显示图片链接

Media：只显示媒体链接

font：只显示字体相关链接

doc：只显示页面先关信息（html）

WS：只显示 webSocket 请求信息

Manifest：Chrome 扩展文件 JSON？（没有具体证实的相关资料）

Other：其他信息

Has blocked cookies：阻止cookies携带？？？

Blocked Requests：隐藏 Network 中的日志（未查到其他阻止）

捕获屏幕

双击其中的截屏可以放大显示，在放大的图下方可以点击跳转到上一帧或者下一帧。单击则可以查看该帧被捕获时的网络请求信息，鼠标经过会有一条黄色竖线在日志列表中显示具体捕获时间
加载时间可拖动选择时间区间并在 ③ 中显示对应加载日志
加载信息 log
1. Name ：资源名称，点击名称可以查看资源的详情情况。
2. Status ：请求的资源MIME类型
3. Initiator ：标记请求是由哪个对象或进程发起的（请求源）
  1. Parser：请求由Chrome的HTML解析器时发起的。
  2. Redirect：请求是由HTTP页面重定向发起的。
  3. Script：请求是由Script脚本发起的。
  4. Other：请求是由其他进程发起的，比如用户点击一个链接跳转到另一个页面或者在地址栏输入URL地址。
4. Size：从服务器下载的文件和请求的资源大小。如果是从缓存中取得的资源则该列会显示(from cache)
5. Time：请求或下载的时间，从发起Request到获取到Response所用的总时间。
6. waterfall：显示所有网络请求的可视化瀑布流(时间状态轴)，点击时间轴，可以查看该请求的详细信息，点击列头则可以根据指定的字段可以排序。

DOMContentLoaded和load事件信息

DOMContentLoaded和Load这两个事件信息会高亮显示加载时间

DOMContentLoaded 事件会在页面上DOM完全加载并解析完毕之后触发，不会等待CSS、图片、子框架加载完成。并在（日志列表 Waterfall）中用一条蓝色竖线标记时间线

load事件会在页面上所有DOM、CSS、JS、图片完全加载完毕之后触发。并在（日志列表 Waterfall）中用一条红色竖线标记

查看具体资源的详情

Headers：该资源的HTTP头信息。
1. General： 记录请求链接、请求方式、请求状态码
2. Response Headers： 服务器端的响应头
  1. Cache-Control: 指定缓存机制，优先级大于Last-Modified
  2. Connection: 包含很多标签列表，其中最常见的是Keep-Alive和Close,分别用于向服务器请求保持TCP链接和断开TCP链接
  3. Content-Encoding: 服务器通过这个头告诉浏览器数据的压缩格式
  4. Content-Length: 服务器通过这个头告诉浏览器回送数据的长度
  5. Content-Type: 服务器通过这个头告诉浏览器回送数据的类型。
  6. Date : 当前时间值
  7. Keep-Alive : 在Connection 为Keep-Alive时，该字段有用，用来说明服务器估计保留链接的时间和允许后续几个请求复用这个保持着链接
  8. Server : 服务器通过这个头告诉浏览器服务器的类型
  9. Vary : 明确告知缓存服务器按照Accept-Encoding字段的内容分别缓存不同的版本
  10. Transfer-Encoding：通过HTTP传送数据时，有些时候并不能事先确定body的长度，因此无法得到Content-Length的值，就不能在header中指定Content-Length了，造成的最直接的影响就是：接收方无法通过Content-Length得到报文体的长度，那怎么判断发送方发送完毕了呢？HTTP 1.1协议在header中引入了Transfer-Encoding，当其值为chunked时, 表明采用chunked编码方式来进行报文体的传输
  11. x-powered-by：用于告知网站是用何种语言或框架编写的。另外网页服务器本身也会吐出自己的版本号，http header是Server:xxxxx，这个有时会造成有人专门利用特定版本网页服务器漏洞进行攻击，nginx可以在配置文件中增加或修改server_tokens off 来去除版本号。
3. Request Headers：
  1. Accept: 告诉服务器客户端支持的数据类型
  2. Accept-Encoding: 告诉服务端客户端支持的数据压缩格式
  3. Accept-Charset: 缓存控制，服务器控制浏览器要不要缓存数据
  4. Connection : 处理完这次请求后，是断开链接还是保持链接
  5. Cookie : 客户可通过Cookie向服务端发送请求，让服务器识别不同的客户端
  6. Host : 访问主机名
  7. Referer : 包含一个URL 。用户从该URL代表的页面出发访问当前请求的页面，当浏览器向Web服务器发送请求的时候，一般会带上Referer，告诉服务器请求是从哪个页面URL来的，服务器借此可以获得一些信息用于处理
  8. User-Agent : 中文名为用户代理，简称UA，是一个特殊的字符串头，使得服务器能够识别客户使用的操作系统及版本、CPU类型，浏览器及版本，浏览器渲染引辑，浏览器语言，浏览器插件等。
4. Form Data：用来显示传递的参数
Preview：根据你所选择的资源类型（JSON、图片、文本）显示相应的预览
Response：显示HTTP的Response信息。与Preview功能几乎一样只是显示格式有区别并不利于开发者观看
Cookies：显示资源HTTP的Request和Response过程中的Cookies信息。
1. 如果选择的资源在Request和Response过程中存在Cookies信息，则Cookies标签会自动显示出来，在里面可以查看所有的Cookies信息。
Timing ：显示资源在整个请求生命周期过程中各部分花费的时间。
1. Queuing ：排队的时间花费。可能由于该请求被渲染引擎认为是优先级比较低的资源（图片）、服务器不可用、超过浏览器的并发请求的最大连接数（Chrome的最大并发连接数为6）.
2. Stalled：从HTTP连接建立到请求能够被发出送出去(真正传输数据)之间的时间花费。包含用于处理代理的时间，如果有已经建立好的连接，这个时间还包括等待已建立连接被复用的时间。
3. Proxy Negotiation 与代理服务器连接的时间花费。
4. DNS Lookup 执行DNS查询的时间。网页上每一个新的域名都要经过一个DNS查询。第二次访问浏览器有缓存的话，则这个时间为0。
5. Initial Connection / Connecting 建立连接的时间花费，包含了TCP握手及重试时间。
6. SSL 完成SSL握手的时间花费。
7. Request sent 发起请求的时间。
8. Waiting (Time to first byte (TTFB)) 是最初的网络请求被发起到从服务器接收到第一个字节这段时间，它包含了TCP连接时间，发送HTTP请求时间和获得响应消息第一个字节的时间。
9. Content Download 获取Response响应数据的时间花费。

六、Application-应用

选项	说明
Application	Manifest 在前端，有多个 manifest 相关的知识，比如 html5 manifest(已废弃)、PWA(Progressive Web App)的 manifest、webpack 的 manifest(模块资源清单)。 Applicaation 面板中的是指 PWA 所需的 manifest.json 文件，其作用是用来告诉浏览器如何在用户的桌面上"安装"这个 app，及安装后该展示的信息。在 Application 面板中，主要是展示其信息，不具有操作性质 1.manifest.json `{ "name": "testApp", "short_name": "tApp", "display": "fullscreen", "background_color": "#ccc", "start_url": "/", "description": "A test web app for manifest", "icons": [ { "src": "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3003998577,4159958951&fm=26&gp=0.jpg", "type": "image/png", "sizes": "490x245" } ] }` 2. HTML `<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="manifest" href="manifest.json"> </head> <body> </body> </html>` 3.页面显示 Service Workers service worker 是独立于当前页面的一段运行在浏览器后台进程里的脚本。它的特性将包括推送消息,背景后台同步， geofencing（地理围栏定位），拦截和处理网络请求。这个 API 会让人兴奋的原因是，它可以使你的应用先访问本地缓存资源，所以在离线状态时，在没有通过网络接收到更多的数据前，仍可以提供基本的功能（一般称之为 Offline First）。在 service worker 之前，另一个叫做 APP Cache 的 api 也可以提供离线体验。APP Cache 的的主要问题是坑比较多，而且其被设计为只适合于单页 web 应用程序，对于传统的多页网站则不适合。service worker 的设计规避了这些痛点。 Service Worker 最佳实践 Clear storage Storage并不是缓存，平常清除缓存表示的是请求资源缓存清理，这个要单独清除要看有没clear storage才对清除以下相关数据 1.Cookies 2.LocalStorage（本地存储）除非清除缓存不然一直存在，同源窗口共享数据 3.IndexedDB（数据库） 4.SessionStroage（会话储存）关闭当前浏览器窗口数据就没了，即使是同源窗口也不会共享数据 5.Application Catche（应用程序缓存） 6.Web SQL（数据库） 7.Cache Storage
Storage	Local Storage 主要功能：它是html5新增的一个本地存储API，所谓localStorage就是一个小仓库的意思，它有5M的大小空间，存储在浏览器中，我们可以通过js来操纵localStorage。用法： local Storage 相关API localStorage通过使用setItem(key,value)来设置元素以及值，如localStorage.setItem("name","chenyejun") 使用getItem(key)来获取元素值，如localStorage.getItem("name") 使用removeItem(key)清除key值,如localStorage.removeItem("name") 使用localStorage.clear()清除所有的key值使用localStorage.length可以获取本地存储key的个数按照序号读取本地存储变量的key值，使用localStorage.key(i) Session Storage 主要功能：W3c上给的介绍是local 与 session这两者区别在于前者用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。而sessionStorage存储的数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。个人的理解是你在打开一个页面时记录sessionStorage,当你把页面或者浏览器关闭时session中的数据即销毁。用法： Session Storage 相关API 保存数据语法 sessionStorage.setItem("key", "value") 读取数据语法 sessionStorage.getItem("key") 删除指定键的数据语法 sessionStorage.removeItem("key") 删除所有数据 sessionStorage.clear() indexedDB 主要功能：IndexedDB简单理解就是前端数据库，提供了一种在用户浏览器中持久存储数据的方法，但是和前端关系型数据不同的是，IndexedDB采用的key-value键值对存储，这种存储形式的数据库查询更简单快速，IndexedDB分别为同步和异步访问提供了单独的API，但是同步API仅提供在web worker内部使用，因此绝大多数情况，我们使用的都是异步API，同时IndexedDB也无法突破同源策略的限制，只能访问在同域下的数据 Web SQL 主要功能：Web SQL的兼容性并不是特别理想，仅chrome ，safari，opera 10.5+等浏览器支持。归咎其原因，主要是因为 Web SQL Database API 实际上并不包含在 HTML5 规范之中。它是一个独立的规范，它引入了一套使用 SQL 操作客户端数据库的 API。其规范已经被停止更新了，所以大多数浏览器并不支持。相关知识使用方法 Web SQL 使用方法 Cookies 主要功能：Cookie基于HTTP规范，用来识别用户 Cookie 使用方法 - API Cookie是服务器发送到浏览器的一小段数据，会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。 Cookie诞生之初的作用就是解决HTTP的无状态请求，用来记录一些用户相关的一些状态。会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息）个性化设置（如用户自定义设置、主题等）浏览器行为跟踪（如跟踪分析用户行为等）因为一些前端交互的需要，后来cookie也被用于存储一些客户端的数据。
Cache	Cache Storag （ cache Storag - API）网络个人资料-中文主要功能：Cache API 是一套搭配 PWA serviceworker 赋能的存储机制，来实现请求数据离线功能。与 applicationCache 相似，提供了力度极细的存储控制能力，内容完全由脚本控制。常在 serviceworker 中搭配 Fetch 使用，且同一个 URL 不同 header 可以存储多个 Response。不提供跨域共享，且与HTTP缓存完全隔离。与其他存储机制的区别： Cache API 是异步化的存储方式，serviceworker中必须使用异步化存储。 Cache API 是以 Requst 做为 key，Response 做为 value 进行存储的，异步化的 IndexDB 基于结构化克隆存储，无法存储流式数据，转换成本过高，增大内存使用及影响速度。兼容性 Application Cache （Application Cache-api） Application Cache 网络个人资料-中文 * 此功能未来可能会被废弃将被 ServiceWorkers 代替主要功能：Application Cache 是基于HTML5 的一种使WEB 浏览器可以缓存应用程序资源，已达到应用程序可以离线使用的目的。APPCache（简写）不同于session cache，session cache是有过期时间的，到超过了过期时间或者浏览器关闭，缓存文件就会被自动删除；但是APPCache并没有这样类似的机制，所以如果没有手动或者程序设置地删除，APPCache会一直保存在客户端浏览器缓存区中。 APPCache的优势离线浏览: 用户可以在离线状态下浏览网站内容。更快的速度: 因为数据被存储在本地，所以速度会更快。减轻服务器的负载: 浏览器只会下载在服务器上发生改变的资源。
Bacjground Services	未查询到可靠的资料。（所有列表似乎只作为观看，只读行为）
Frames	未查到相关可靠资料经测试：该功能把页面结构大致分类进行相关文件集合 Fonts：文字 Images：图片文件 Other：其他 Scripts： JS文件 Stylesheets： style样式、页面中所有引用的 css 、js 链接一些内嵌的 <frame>

七、Performance-性能

选项说明

主要功能：performance面板可以记录和分析页面在运行时的所有活动并用一些直观的数据图来显示，从而展现出浏览器的运行时的性能。

Disable JavaScript samples：默认情况，在Main主线程的火焰图中，会详细记录 js 函数之间的调用栈，可以开启此选项禁用调用栈记录

Enable advanced paint instrumentation：启用高级绘图工具，可以在分析结果的Frames中的每一帧的详细结果中看到Layer选项卡，其中有选中帧的详细图层信息；也可以在Main主线程火焰图中选中绿色的Paint事件，在最底部详细信息的Paint Profile选项卡中，看到详细的页面绘制过程分析

CPU：模拟CPU性能（低于当前CPU性能的 X 倍）

Network：模拟网络速度（可以自定义）

火焰图中的LCP： LCP 全称 “Largest Contentful Paint”，翻译为“最大内容绘制”，用于监控网页可视区内“绘制面积”最大的元素开始呈现在屏幕上的时间点。

八、Memory-内存信息

选项

说明

默认状态：

记录后：

主要功能：显示网页内存详细信息

默认状态有三个单选框：

Heap snapshot - 用以打印堆快照，堆快照文件显示页面的 javascript 对象和相关 DOM 节点之间的内存分配
Allocation instrumentation on timeline - 在时间轴上记录内存信息，随着时间变化记录内存信息。
Allocation sampling - 内存信息采样，使用采样的方法记录内存分配。此配置文件类型具有最小的性能开销，可用于长时间运行的操作。它提供了由 javascript 执行堆栈细分的良好近似值分配。

记录后：

开始记录
清空记录
GC （在(微软的)JScript中提供了一个CollectGarbage()过程(通常简称GC过程)，GC过程用于清理当前IE中的“失效的对象失例”，也就是调用对象的析构过程）
查看方式
1. Summary - 可以显示按构造函数名称分组的对象。使用此视图可以根据按构造函数名称分组的类型深入了解对象（及其内存使用），适用于跟踪 DOM 泄漏。
2. Containment - 此视图提供了一种对象结构视图来分析内存使用，由顶级对象作为入口。
3. Statistic - 内存使用饼状的统计图。
对象归类的筛选
对象选择

九、Lighthouse

选项

说明

主要功能：网站性能检测工具lighthouse （评分）

Cateagories
1. Performance - 性能检测，如网页的加载速度、响应时间等
2. Accessibility - 铺助检测，如网页的可访问性问题，HTML代码标签之类的优化等
3. Best Practices - 实践性检测，如网页安全性，如是否开启HTTPS、网页存在的漏洞等
4. SEO - 搜索引擎优化检测，如网页title是否符合搜索引擎的优化标准等
Device
1. Mobile- 移动设备
2. Desktop- 桌面设备

Generate report 开始检测 -> 结果