Chrome 开发工具之 Application

时间 2019-11-06

标签 chrome 开发工具 application 栏目 Chrome 繁體版

原文原文链接

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 的开发者工具都须要更多更详细的了解，才能在开发和调试工做中更顺利。