Chrome开发者工具 - Application

Application

主要做用是检查 web 应用加载的全部资源，包括 Manifest、Service Workers、Local Storage、Session Storage、IndexedDB、Web SQL==(已废弃)==、Cookies、Cache Storage、Application Cache==(已废弃)==、BackGround Services、Frames 等。

Application

Manifest

Applicaation 面板中的是指PWA:==（渐进式加强WEB应用）== 所需的 manifest.json 文件，其做用是用来告诉浏览器如何在用户的桌面上"安装"这个app，及安装后该展现的信息。在 Application 面板中，主要是展现其信息，不具备操做性质。

图为小米商城的mainifest

Service Workers

Service Worker: 是浏览器在后台独立于网页运行的脚本，它们已包括如推送通知和后台同步等功能，支持离线应用，每24小时都会更新本地的离线脚本。

• 它是一种JavaScript Worker，没法直接访问 DOM。 Service Worker 经过响应 postMessage 接口发送的消息来与其控制的页面通讯，页面可在必要时对 DOM 执行操做。
• Service Worker 是一种可编程网络代理，让您可以控制页面所发送网络请求的处理方式。
• Service Worker 在不用时会被停止，并在下次有须要时重启
• Service Worker 能够访问 IndexedDB。
• Service Worker 普遍地利用了 promise.

能够查看已安装的推送通知、后台同步和离线体验。

• Offline 复选框能够将 DevTools 切换至离线模式。它等同于 Network 窗格中的离线模式，或者 Command Menu 中的 Go offline 选项。
• Update on reload 复选框能够强制服务工做线程在每次页面加载时更新。
• Bypass for network 复选框能够绕过服务工做线程并强制浏览器转至网络寻找请求的资源。
• Update 按钮能够对指定的服务工做线程执行一次性更新。
• Push 按钮能够在没有负载的状况下模拟推送通知。
• Sync 按钮能够模拟后台同步事件。
• Unregister 按钮能够注销指定的服务工做线程。
• Source 行能够告诉您当前正在运行的服务工做线程的安装时间。 连接是服务工做线程源文件的名称。点击连接会将您定向至服务工做线程来源。
• Status 行能够告诉您服务工做线程的状态。
• Clients 行能够告诉您服务工做线程做用域的原点。

Clear storage

清除Service Worker、Storage、数据库和缓存

Storage

Local Storage

• 双击键或值能够修改相应的值。
• 双击空白单元格能够添加新条目。
• 点击对应的条目 ，而后按 Delete 按钮能够删除该该条目。
• 点击 refresh 按钮能够查看您的更改。

Session Storage

操做等同于 Local Storage

IndexedDB

IndexedDB: 是一种在用户浏览器中持久存储数据的方法。它容许您不考虑网络可用性，建立具备丰富查询能力的可离线 Web 应用程序。IndexedDB 对于存储大量数据的应用程序（例如借阅库中的 DVD 目录）和不须要持久 Internet 链接的应用程序（例如邮件客户端、待办事项列表或记事本）颇有用。 ==兼容性IE10+==

• IndexedDB 数据库使用 key-value 键值对储存数据.
• IndexedDB 是事务模式的数据库.
• The IndexedDB API 基本上是异步的.
• IndexedDB是面向对象的.
• indexedDB不使用结构化查询语言（SQL）.
• IndexedDB遵循同源（same-origin）策略.

在 IndexedDB 面板，能够查看、删除 IndexedDB 内的数据(==不能够修改==)。

const IDBOpenDBRequest = indexedDB.open('testDB', 1)
IDBOpenDBRequest.onsuccess = e => {
  const db = IDBOpenDBRequest.result
  const transaction = db.transaction(['User', 'Book'], 'readwrite')
  const objStore = transaction.objectStore('User')
  const objBookStore = transaction.objectStore('Book')
  // User 表加2条数据
  objStore.put({
    name: 'xiaoming',
    age: 18,
    sex: 1
  })
  objStore.put({
    name: 'xiaohong',
    age: 18,
    sex: 2
  })
  // Book 表加一条数据
  objBookStore.put({
    bookName: '< hello world >',
    price: 29,
    status: 1
  })
}
IDBOpenDBRequest.onupgradeneeded = e => {
  const db = IDBOpenDBRequest.result
  const store = db.createObjectStore('User', {
    keyPath: 'name'
  })
  store.createIndex('name', 'name')
  store.createIndex('age', 'age')
  store.createIndex('sex', 'sex')
  const bookStore = db.createObjectStore('Book', {
    keyPath: 'id',
    autoIncrement: true
  })
  bookStore.createIndex('bookName', 'bookName')
  bookStore.createIndex('price', 'price')
  bookStore.createIndex('status', 'status')
}
复制代码

Cookies

• name 键名
• value 值
• Domain 和 Path 标识定义了Cookie的做用域。Domain 标识指定了哪些主机能够接受Cookie。Path 标识指定了主机下的哪些路径能够接受Cookie
• Expires / Max-Age. Cookie 的过时时间或最长周期。对于会话 cookie，这一领域始终是Session(会话)。
• Size Cookie 的大小，以字节为单位。
• HttpOnly 若是存在，则指示应仅经过 HTTP 使用 cookie，而且不容许 JavaScript 修改.
• SameSite Strict容许服务器要求某个cookie在跨站请求时不会被发送，从而能够阻止跨站请求伪造攻击（CSRF）。Lax则能够被发送

Background Services

Background Fetch

Background Fetch 容许开发人员离开当前的页面，进行加载和操做大文件或文件列表。这样能够加大上传和下载的成功率，并容许sevice worker 缓存结果。

Background Sync

Background Sync 可延迟用户行为，直到用户网络链接稳定。经常使用语聊天消息，电子邮件，文档更新等功能中。提高性能和体验。

Notifications

Notifications是在Web页面以外，以弹出桌面对话框的形式通知用户发生了某事件。

Push Messaging

Push Messaging使应用或扩展程序可以接收经过 Google 云消息服务发送的消息数据。

Frames

该面板显示了该网站全部内容资源。效果如图：