chrome devtools的使用—— Application面板

咖妃
326 阅读8分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第19天，点击查看活动详情

前言

今天，分享chrome 开发者工具的Application面板。它将作为本系列的最后一个面板出现。就个人而言，这个面板的使用频率不低于console等面板。

image.png

Manifest

在前端，有多个 manifest 相关的知识，比如 html5 manifest(已废弃)、PWA(Progressive Web App)的 manifest、Webpack 的 manifest(模块资源清单)。

Applicaation 面板中的是指 PWA 所需的 manifest.json 文件，其作用是用来告诉浏览器如何在用户的桌面上"安装"这个 app，及安装后该展示的信息。更多关于PWA，可移步这块：

在 Application 面板中，主要是展示其信息，不具有操作性质.展示图如下(下面是腾讯会议 PWA 示例)：

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo128.png",
      "type": "image/png",
      "sizes": "128x128"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

image.png

Service Workers & Cache Storage & Background Services

Service Worker

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

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

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

  • Offline 将 DevTools 切换至离线模式。它等同于 Network 窗格中的离线模式.
  • Update on reload 强制服务工作线程在每次页面加载时更新。
  • Bypass for network 绕过服务工作线程并强制浏览器转至网络寻找请求的资源。
  • Update 对指定的服务工作线程执行一次性更新。
  • Push 在没有负载的情况下模拟推送通知。
  • Sync 模拟后台同步事件。
  • Unregister 注销指定的服务工作线程。
  • Status 服务工作线程的状态。

image.png

Cache Storage

sw 缓存的资源列表。这块介绍比较牛逼

Background Services

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

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

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

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

Periodic background sync 定期在后台同步数据，这样当用户打开你安装的 PWA 时，他们总是有最新的数据。

Payment Handler 是一种开放的、基于标准的接受付款的方式。Payment Handler API通过启用基于 Web 的支付应用程序来直接在支付请求体验中促进支付，从而扩展了支付请求的范围。

Clear storage

该面板主要用于展示当前浏览器存储信息的一个总览清除各种缓存(可自行勾选所需清理的内容)，面板如下：

image.png

图中可以看到，可清理的有：

  • 卸载 services workers
  • Local storage 和 Session storage
  • IndexedDB 数据
  • Web SQL 数据
  • Cookies
  • Cache storage

Local Storage & Seesion Storage

他们两都属于 Web Storage，且兼容比较好。两者区别是：localStorage 的生命周期是需要人为干涉的，sessionStorage 的生命周期是一次会话窗口。

Local Storage 面板和 Seesion Storage 面板显示的是浏览器的 localStorage/sessionStorage 键值对(KVP)数据(该数据大小在 2~5MB 之间，各浏览器，各平台不同)，在这个面板中。你可以执行查看值、双击空行新增 KVP、双击 KVP 对齐进行修改、删除 KVP 等操作。

IndexedDB

IndexDB 是浏览器端提供的本地存储键值对的数据库，建立在事务数据库模型上(所做的操作都发生在创建的事务对象上下文)，其 api 大多都是异步的。

在 IndexedDB 面板，可以查看、删除 IndexedDB 内的数据(注意，不可以修改)。

const data = [
    {id: 1, name: "Tom", age: "18"},
    {id: 2, name: "Tommy", age: "16"},
];
// 打开数据库，两个参数（数据库名字，版本号），如果数据库不存在则创建一个新的库
let request = window.indexedDB.open('myDatabase', '1')
// 数据库操作过程中出错，则错误回调被触发
request.onerror = (event) => {
    console.log(event)
}
// 数据库操作一切正常，所有操作后触发
request.onsuccess = (event) => {
    let db = event.target.result
    // 数据读取
    let usersObjectStore = db.transaction('users').objectStore('users')
    let userRequest = usersObjectStore.get(1)
    userRequest.onsuccess = function (event) {
        console.log(event.target.result)
    }
}
// 创建一个新的数据库或者修改数据库版本号时触发
request.onupgradeneeded = (event) => {
    let db = event.target.result
    // 创建对象仓库用来存储数据，把id作为keyPath，keyPath必须保证不重复，相当于数据库的主键
    let objectStore = db.createObjectStore('users', { keyPath: 'id'})
    // 建立索引，name和age可能重复，因此unique设置为false
    objectStore.createIndex('name', 'name', {unique: false})
    objectStore.createIndex('age', 'age', {unique: false})
    // 确保在插入数据前对象仓库已经建立
    objectStore.transaction.oncomplete = () => {
        // 将数据保存到数据仓库
        let usersObjectStore = db.transaction('users', 'readwrite').objectStore('users')
        data.forEach(data => {
            usersObjectStore.add(data)
        })
    }
}

image.png

应用场景:

  • 不需要网络连接的纯离线应用，比如Todolist这类的用来记录待办任务类型的应用

  • 需要存储大量数据的应用，比如图书管理系统这类的需要存储大量数据的应用，完全可以将图书信息存储在IndexedDB中\

  • 配和service worker构建pwa应用，用来缓存网络请求

Cookies

  • name 键名

  • value 值

  • Domain 和 Path 标识定义了Cookie的作用域。Domain 标识指定了哪些主机可以接受Cookie。Path 标识指定了主机下的哪些路径可以接受Cookie

  • Expires / Max-Age. Cookie 的过期时间或最长周期。对于会话 cookie，这一领域始终是Session(会话)。

  • Size Cookie 的大小，以字节为单位。

  • HttpOnly 如果存在，则指示应仅通过 HTTP 使用 cookie，并且不允许 JavaScript 修改.

  • SameSite

    • SameSite的作用为了防止跨站请求伪造(CSRF)攻击和保护用户隐私

    • Chrome的SameSite默认值是Lax, 而Safari的默认值是Strict

    • SameSite 的值是 Strict，那么浏览器会完全禁止第三方 Cookie。

    • Lax 相对宽松一点。在跨站点的情况下，从第三方站点的链接打开和从第三方站点提交 Get 方式的表单这两种方式都会携带 Cookie。但如果在第三方站点中使用 Post 方法，或者通过 img、iframe 等标签加载的 URL，这些场景都不会携带 Cookie。

    • 使用None的话，在任何情况下都会发送 Cookie 数据。

    • 跨站一定跨域, 跨域不一定跨站

    • 只有顶级域名+二级域名不同, 就属于跨站

      • 同站: www.zhihu.com 和 zhihu.com, 顶级域名是 .com, 二级域名是.zhihu, 这里属于同站, 但是跨域了
      • 跨站: baidu.com和jd.com, a.github.io和b.github.io, .github.io是顶级域名

氛围到这了，提个问题不过分吧。 问题:  

  1. 访问juejin.cn页面时, 有一个cookie: juejin_track_id 的domain为.juejin.cn, path: /, 请问请求 api.juejin.cn/common/config时会带上吗?
  2. 跨域请求时, 怎么带上cookie?

Frames

该面板显示了该网站所有内容资源。

image.png

最后

公布答案：

  1. domain 和 path

domain是域名，path是路径，两者加起来就构成了 URL，domain和path一起来限制 cookie 能被哪些 URL 访问。

一句话概括：某cookie的 domain为“baidu.com”, path为“/ ”，若请求的URL(URL 可以是js/html/img/css资源请求，但不包括 XHR 请求)的域名是“baidu.com”或其子域如“api.baidu.com”、“dev.api.baidu.com”，且 URL 的路径是“/ ”或子路径“/home”、“/home/login”，则浏览器会将此 cookie 添加到该请求的 cookie 头部中。

所以domain和path2个选项共同决定了cookie何时被浏览器自动添加到请求头部中发送出去。如果没有设置这两个选项，则会使用默认值。domain的默认值为设置该cookie的网页所在的域名，path默认值为设置该cookie的网页所在的目录。

发生跨域xhr请求时，即使请求URL的域名和路径都满足 cookie 的 domain 和 path，默认情况下cookie也不会自动被添加到请求头部中。

  1. 在跨域请求中，client端必须手动设置xhr.withCredentials=true，且server端也必须允许request能携带认证信息（即response header中包含Access-Control-Allow-Credentials:true），这样浏览器才会自动将cookie加在request header中。
avatar
文章
阅读
粉丝