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

該面板顯示了該網站全部內容資源。效果如圖：