Chrome开发者工具之Application
Chrome开发者工具系列
Chrome 开发者工具有 一列面板，Element、Console、Sources…。
- Chrome开发者工具之Application
文章目录
- Chrome开发者工具系列
- Application结构
-
- 展示效果
- Application — 应用
-
- Manifest - 清单
- Service Workers - 服务网络
- Storage - 存储
- Storage — 存储
-
- Local Storage - 本地存储空间
- Session Storage - 会话存储空间
- IndexedDB - 持久存储数据
- Cookies - 浏览器缓存
- Trust Tokens - 信任令牌
- Cache — 缓存
-
- Cache Storage - 缓存空间
- Back-forward Cache - 往返缓存
- Background Services — 后台服务
-
- Background Fetch - 后台提取
- Background Sync- 后台同步
- Notifications - 通知
- Payment Handler - 付款处理程序
- Periodic Background Sync - 定期后台同步
- Push Messaging - 推送消息
- Frames
-
- Top
Application结构
Chrome 开发者工具的Applicatio面板，主要作用是检查 web 应用加载的所有资源，该目录中的请求数据可能会有所不同，以实际请求数据为基准。
展示效果
Application — 应用
Manifest - 清单
Service Workers - 服务网络
Storage - 存储
Storage — 存储
Local Storage - 本地存储空间
表示访问页面储存的变量信息，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁（浏览器关闭）。
| key | value |
|---|---|
| userInfo | {key1: value1, key2: value2, …} |
存储一个接口返回对象，对象名为userInfo， 值为{key1: value1, key2: value2, …}。该对象在页面存活期间都可直接引用。
Session Storage - 会话存储空间
用于本地存储一个会话（session）的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁（浏览器关闭）。因此session Storage不是一种持久化的本地存储，仅仅是会话级别的存储，操作与localStorage一样，就不细讲了。
网页插件的储存信息
| key | value |
|---|---|
| React::DevTools::lastSelection |
使用DevTools插件时返回的结果
// 插件value
{
"rendererID": 1,
"path": [
{
"displayName": "SrcUmiPluginmodelProvider:0",
"key": null,
"index": 0
},
{
"displayName": "SrcUmiPluginmodelProvider",
"key": null,
"index": 0
}
]
}
IndexedDB - 持久存储数据
IndexedDB是一种在浏览器中持久存储数据的方法，允许我们不考虑网络可用性，创建具有丰富查询能力的可离线web应用程序。indexedDB对于存储大量数据的应用程序和不需要持久internet链接的应用程序（例如邮件客户端、待办事项列或记事本）很有用。
可参考：indexedDB使用指南
Cookies - 浏览器缓存
cookies一种保存在电脑上的一种文件，当我们使用电脑进行浏览网页的时候，服务器就会生成一个证书，并且返回给我们的电脑，这个证书就是cookie，一般情况下，cookie是服务器写入客户端的文件，我们也可以叫浏览器缓存。
| name | value | domain | path | expires / max-age | size | httponly | secure | samesite | sameparty | priority |
|---|---|---|---|---|---|---|---|---|---|---|
| SESSION | localhost | / | Session | 55 |
domain: 指定Cookie的有效域, 决定在向该域发送请求时是否携带此Cookie
expires / max-age: 相对/绝对过期时间，由访问的apache服务器设置，A—相对；M—绝对；
httponly: 通过js脚本将无法读取到cookie信息，无法用document.cookie打出cookie的内容。这样能有效的防止XSS（cross siteScript—跨站脚本）攻击，窃取cookie内容，这样就增加了cookie的安全性；
secure: 这个cookie只能用https和ssl等安全协议发送给服务器，在不安全的http协议中不传输此cookie;
samesite: 用来限制第三方Cookie。
- Strict—完全禁止第三方Cookie
- Lax—导航到目标网址的 Get 请求发送Cookie
- None: 显式关闭SameSite属性
priority: chrome的提案，定义了三种优先级，Low/Medium/High，当cookie数量超出时，低优先级的cookie会被优先清除
可参考：Cookie详解
Trust Tokens - 信任令牌
为了在不需要明确知道用户的情况下验证用户身份，相比Cookie，trust tokens不能跨网站追踪用户，可以让网站向广告商证明访问的是真正的用户，而不是机器人。
Cache — 缓存
Cache Storage - 缓存空间
用来存储Response（请求）对象，作用于需要使用请求缓存的方法。
可参考: 浏览器application中cache storage及application cache简介
Back-forward Cache - 往返缓存
是浏览器为了在用户页面间执行前进后退操作时拥有更加流畅体验的一种策略。浏览器原本就允许用户按下Back或Forward来回到上一个访问的网站，或是移至下一个网站，但Back-Forward Cache是个内存缓存功能，于内存中存储了完整的页面快照，以让用户在切换前后所访问的网页时更快速，换句话说就是back和fordword操作读取浏览器缓存，而不请求服务器。
注：该功能目前还不稳定，谨慎使用。
Background Services — 后台服务
使用方式： 点击启动录制事件按钮，开始录制。
保留时间： 3天
属性说明：
| Timestamp | Event | Origin | Service Worker Scope | Instance Id |
|---|---|---|---|---|
| 时间戳 | 事件 | 来源 | 服务作用范围 | 实例名 |
- Origin：对应domain
- Service Worker Scope：对应path
Background Fetch - 后台提取
容许开发人员离开当前的页面，进行加载和操做大文件或文件列表。这样能够加大上传和下载的成功率，并容许sevice worker 缓存结果。Background Fetch在后台进行，在你点击录制按钮后，即便关闭标签，甚至关闭浏览器，这两类事件仍然可以被录制到。
点击 Background Fetch 或 Background Sync 选项，然后点击 Record 开始记录
Background Sync- 后台同步
Background Sync 可延迟用户行为，直到用户网络链接稳定。经常使用语聊天消息，电子邮件，文档更新等功能中。提高性能和体验。
Notifications - 通知
Notifications是在Web页面以外，以弹出桌面对话框的形式通知用户发生了某事件。一旦开始录制，页面上的推送消息也会保留3天。
Payment Handler - 付款处理程序
触发付款处理事件后，点击事件行以了解有关该事件的更多信息。如果 Payment Handler 事件发生在其他域，可以启用 Show events from other domains 选项。
Periodic Background Sync - 定期后台同步
跟后台同步类似，额外增加一个定时任务
Push Messaging - 推送消息
Push Messaging使应用或扩展程序可以接收经过 Google 云消息服务发送的消息数据。
Frames
该面板显示了该网站所有内容资源