Chrome 開發工具之 Application

Chrome 開發者工具備 Application 這麼一個面板，主要做用是檢查 web 應用加載的全部資源，包括 Manifest、Service Workers、Local Storage、Session Storage、IndexedDB、Web SQL(該標準早已廢棄，被 IndexedDB 幹趴下)、Cookies、Cache Storage、Application Cache(已被 Service Workers 幹趴下)、BackGround Services(頭一回見，和 sw 相關)、Frames 等。

下面將探索一番如何使用 Application 來查看及操做這些資源。

Manifest

在前端，有多個 manifest 相關的知識，好比 html5 manifest(已廢棄)、PWA(Progressive Web App)的 manifest、webpack 的 manifest(模塊資源清單)。

 

Applicaation 面板中的是指 PWA 所需的 manifest.json 文件，其做用是用來告訴瀏覽器如何在用戶的桌面上"安裝"這個 app，及安裝後該展現的信息。

 

在 Application 面板中，主要是展現其信息，不具備操做性質，展現圖以下(下面只是個簡單的不嚴格的本地 PWA 示例)：

manifest.json

{
  "name": "testApp",
  "short_name": "tApp",
  "display": "fullscreen",
  "background_color": "#000",
  "start_url": "/",
  "description": "A test web app for manifest",
  "icons": [
    {
      "src": "https://developers.google.com/web/images/web-fundamentals-icon192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ]
}

 

效果：

 

從圖中能夠看到，該面板顯示了 manifest.json 裏的相關信息，而且給出指向到這個文件的連接。

 

想要了解更多 manifest 內容可參考：

web-app-manifest

app-install-banners

注意：該功能兼容性目前僅 Chrome73+ 和 Edge 76 支持。

Service Workers & Cache Storage & Background Services

這三個選項放在一塊兒寫了... 由於沒寫出抽離出 sw 後的 Cache Storage 和 Background Services。儘管 Cache Storage 在 mdn 裏的描述聽說是能夠單獨使用的...

 

Service Workers 是獨立於當前頁面的一段運行在瀏覽器後臺進程裏的腳本，因爲運行在 worker 上下文，所以它不能訪問 DOM，不過能夠作一些簡單的輔助性邏輯處理和離線緩存等。兼容性的話...除了 IE 都還行。

Cache Storage 能夠認爲是 sw 緩存的資源列表(至少如今暫時是這麼認爲的...由於當前沒能寫出也沒找到合適的其餘場景的例子)。兼容的話，同 Service Workers.

Background Services 分 Background Fetch 和 Background Sync，前者用於生成在後臺掛起的 fetch 資源任務，後者是生成在後臺掛起執行的同步任務。兼容性的話...除了 Chrome 49+ 和 Edge 76+ 和 Opera 36+，其餘都不行。

in test.html：

if ('serviceWorker' in navigator) {
  const sw = navigator.serviceWorker
    .register('/testhtml/sw.js', { scope: '/testhtml/' })
    .then(function(reg) {
      if (reg.installing) {
        console.log('Service worker installing')
      } else if (reg.waiting) {
        console.log('Service worker installed')
      } else if (reg.active) {
        console.log('Service worker active')
      }
      reg.update()
    })
    .catch(function(error) {
      console.log('Registration failed with ' + error)
    })

  navigator.serviceWorker.ready.then(sw => {
    return sw.sync.register('hello-sync')
  })

  navigator.serviceWorker.ready.then(async sw => {
    const bgFetch = await sw.backgroundFetch.fetch('custom-fetch', ['1.jpg'], {
      title: 'download 1.jpg',
      icons: [
        {
          sizes: '300x300',
          src: '2.jpg',
          type: 'image/jpg'
        }
      ]
    })
  })
}

 

sw.js：

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('v1').then(cache => {
      return cache.addAll([
        '/testhtml/test.html',
        '/testhtml/test.css',
        '/testhtml/test.js',
        '/testhtml/2.jpg'
      ])
    })
  )
})

self.addEventListener('sync', event => {
  if (event.tag == 'hello-sync') {
    console.log('receive hello-sync')
  }
})

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      if (response !== undefined) {
        return response
      } else {
        return fetch(event.request)
          .then(response => {
            let responseClone = response.clone()
            caches.open('cache_1').then(cache => {
              cache.put(event.request, responseClone)
            })
            return response
          })
          .catch(() => {})
      }
    })
  )
})

 

效果以下

 

Service Workers：

圖中 Sync 功能能夠觸發 Background Sync 事件，並記錄到對應面板列表中。

Cache Storage：

列表的內容是隻讀的。圖中的一些簡單篩選刷新操做就很少作贅述了...

Background Fetch：

 

列表的內容是隻讀的。圖中能夠看到，一次 fetch 的各個階段狀態轉變都會被記錄：Background Fetch registered => Background Fetch started => Request processing started => Request processing completed => Background Fetch completed.

Background Sync：

 

列表的內容是隻讀的。圖中能夠看到，一次 sync 的各個階段狀態轉變都也都會被記錄：Registered sync => Dispatched sync event => Sync completed.

參考文檔：

Service Workers - mdn

Service Workers

Cache Storage

Background Fetch

Background Sync

Clear storage

該面板主要用於展現當前瀏覽器存儲信息的一個總覽清除各類緩存(可自行勾選所需清理的內容)，面板以下：

 

圖中能夠看到，可清理有：

• 卸載 services workers
• Local storage 和 Session storage
• IndexedDB 數據
• Web SQL 數據
• Cookies
• Cache storage
• 圖中底下還有 Application Cache 的選項未能截全...

Local Storage & Seesion Storage

他們兩都屬於 Web Storage，且兼容比較好。二者區別是：localStorage 的生命週期是須要人爲干涉的，sessionStorage 的生命週期是一次會話窗口。

 

Local Storage 面板和 Seesion Storage 面板顯示的是瀏覽器的 localStorage/sessionStorage 鍵值對(KVP)數據(該數據大小在 2~5MB 之間，各瀏覽器，各平臺不一樣)，在這個面板中。你能夠執行查看值、雙擊空行新增 KVP、雙擊 KVP 對齊進行修改、刪除 KVP 等操做。

代碼：

localStorage.setItem('astring', 'This is an apple')
localStorage.setItem('aobject', { say: 'hello' })
localStorage.setItem('aboolean', false)

效果以下(Session Storage 面板狀況是同樣)：

吶，看上圖知道，數據在存取的時候都得是`string`類型。

更多信息參考：

localStorage - mdn

the-localstorage-attribute

IndexedDB

IndexDB 是瀏覽器端提供的本地存儲鍵值對的數據庫，創建在事務數據庫模型上(所作的操做都發生在建立的事務對象上下文)，其 api 大多都是異步的。

在 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')
}

大體效果以下：

 

意外的是這玩意(這個數據庫很 js...)居然幹翻了原先的 [Web SQL](https://www.w3.org/TR/webdatabase/)(這個數據庫比較 sql...)，更意外的這玩意的兼容性還算不錯...

更多 IndexedDB 信息參考：

IndexedDB

 

Cookies

Cookies 面板查看、新增(僅限)、修改、刪除 http cookies。

好比在 nginx 上設置 cookies：

add_header Set-Cookie "say=hello;Domain=local.tuya-inc.cn;Path=/;Max-Age=10000";

效果以下：

當前的 cookies 值是能夠經過 js 代碼獲取和修改的，也能夠直接修改。若是不但願 js 能夠操控該條 cookies，則須要在 Set-Cookies 時加上`httpOnly`字段。

Frames

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

 

 

注意下，iframe 的內容不能預覽，若是頁面帶`x-frame-options=SAMEORIGIN`，則其餘域名網站就嵌入不了額。

最後

工欲善其事，必先利其器... 做爲一個開發者，對 Chrome 和 FireFox 的開發者工具都須要更多更詳細的瞭解，才能在開發和調試工做中更順利。