Chrome开发者工具 - Application

IGuang
2,270 阅读4分钟

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

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

avatar
文章
阅读
粉丝