您的位置:首页 » 分类: 前端工具 & 前端资源 » 文章: Chrome DevTools – 检查和管理Storage, Databases 和 Caches

Chrome DevTools – 检查和管理Storage, Databases 和 Caches

小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握..

Application(应用)面板检查和管理Storage(存储)、 Databases(数据库)和Caches(缓存)。

TL;DR

  • 查看和编辑本地和会话存储。
  • 检查和修改 IndexedDB 数据库。
  • 在Web SQL数据库上执行语句。
  • 查看 Application 和 Service Worker 缓存。
  • 单击按钮,清除所有存储,数据库,缓存和service workers。

Local storage(本地存储)

如果您使用local storage(本地存储)来存储键值对(KVP),您可以在Local Storage(本地存储)窗格中检查,修改和删除这些键值对(KVP)。

本地存储窗格

  • 双击某个键或值来编辑该值。
  • 双击一个空单元格可以添加一个新的键值对(KVP)。
  • 单击键值对(KVP),然后按delete(删除)按钮(删除按钮)删除该KVP。您可以从Clear storage(清除存储)窗格单击一个按钮来清除所有本地存储数据。
  • 如果您在与某个页面交互中创建,删除或修改键值对(KVP),您不会实时看到这些变化更新。点击refresh(刷新)按钮(刷新按钮)来查看这些更改。

Session storage(会话存储)

Session Storage(会话存储)窗格的工作方式与Local Storage(本地存储)窗格相同。 查看上面的本地存储部分,了解如何查看和编辑会话存储

IndexedDB

使用IndexedDB窗格检查、 修改和删除 IndexedDB 数据。

当您展开IndexedDB窗格时,下面的第一级是数据库。如果有多个数据库处于活动状态,那么您将看到多个条目。在下面的屏幕截图中,页面中只有一个活动状态的数据库。

indexeddb tab

单击数据库的名称可以查看该数据库的安全来源(主机地址),名称和版本。

indexeddb database

展开数据库可以查看其键值对(KVP)。

indexeddb key-value pairs

使用Start from key(从键开始)文本字段旁边的箭头按钮可以切换键值对(KVP)的页面。

展开一个值,然后双击可以编辑该值。添加,修改或删除值时,这些更改将不会实时更新。单击refresh(刷新)按钮以更新数据库。

editing an indexeddb kvp

Start from key(从键开始)文本字段中输入一个键值,以筛选出小于该值的所有键。

filtered kvps

当你添加,修改或删除值时,这些更改将不会实时更新。单击点击refresh(刷新)按钮(刷新按钮)来更新数据库。

单击clear object store(清除对象储存)按钮(清除对象储存)可以从数据库中删除所有数据。您还可以通过单击Clear storage(清除存储)窗格来完成此操作,以及注销service workers并删除其他存储和缓存。

Web SQL

使用 Web SQL 窗格 查询和修改 Web SQL 数据库。

单击数据库名称可以打开该数据库控制台。你可以在这里执行数据库语句。

web sql console

点击一个数据库表查看该表的数据

web sql table

  • 你不能在这里更新值,但是你可以通过数据库控制台更新(见上文)。
  • 点击列头 可以按列排序该表。
  • 你对表所做的更改不会实时更新。点击refresh(刷新)按钮(刷新按钮)来查看你的更新。
  • Visibile columns(可见列)文本字段里中输入用空格或逗号来分隔的列名称,将仅显示的那些列。

Application Cache(应用缓存)

使用 Application Cache(应用缓存)窗格来检查资源和通过 应用缓存 API创建的规则.

application cache pane

每一行代表一个资源。

Type列将具有下列值之一:

  • Master – 在资源上的 manifest 属性表示此缓存是它的主人。
  • Explicit – 此资源在清单中明确列出.
  • Network – 该清单指定的资源必须来自网络。
  • Fallback – 在 Resource 列中的URL 被回退为另一个URL(不在 DevTools中显示).

在表的底部有状态图标指示您的网络连接和应用程序缓存的状态。应用程序缓存可以具有以下状态:

  • IDLE – 高速缓存中有没有新的变化.
  • CHECKING – 该清单正在读取和已检查更新.
  • DOWNLOADING – 资源是被添加到缓存中.
  • UPDATEREADY – 缓存在一个新版本中可以使用.
  • OBSOLETE – 正在删除缓存.

Service Worker Caches

Application(应用)面板上的Cache Storage(缓存存储)窗格允许您检查,修改和调试使用(service worker)缓存API创建的缓存。
请查看下面的指南以获得更多帮助。

清除 service workers, storage, databases, 和 caches

有时你只需要清除特定来源的所有数据。Application(应用)面板上的Clear storage(清除存储)窗格允许您选择性地注销service workers,存储和高速缓存。若要清除数据,只需勾选组件旁边的复选框,然后单击Clear site data(清除站点数据)。该操作将删除Clear storage(清除存储)签下列出的源的所有数据。

clear storage

说明

翻译自:https://developers.google.com/web/tools/chrome-devtools/manage-data/local-storage

关注WEB前端开发官方公众号

关注国内外最新最好的前端开发技术干货,获取最新前端开发资讯,致力于打造高质量的前端技术分享公众号

版权声明

本文仅用于学习、研究和交流目的,欢迎非商业性质转载。
转载请注明文章的完整链接:http://www.css88.com/archives/6865
作者(译者): 及 网站出处:CSS88.com
yideng728-90

发表评论

电子邮件地址不会被公开。 必填项已用*标注