检查和管理存储、数据库与缓存

  • 查看和修改本地存储与会话存储。
  • 检查和修改 IndexedDB 数据库。
  • 对 Web SQL 数据库执行语句。
  • 查看应用缓存和服务工作线程缓存。
  • 点击一次按钮即可清除所有存储、数据库、缓存和服务工作线程。

本地存储

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

  • 双击键或值可以修改相应的值。
  • 双击空白单元格可以添加新 KVP。
  • 点击 KVP ,然后按 Delete 按钮 () 可以删除该 KVP。 只需点击一次按钮,即可从 Clear storage 窗格擦除所有本地存储数据。

  • 如果您使用一种可以创建、删除或修改 KVP 的方式与页面交互,则不会看到这些更改实时更新。 点击 refresh 按钮 () 可以查看您的更改。

IndexedDB

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

展开 IndexedDB 窗格时,IndexedDB 下的第一个级别是数据库。 如果存在多个活动的数据库,您会看到多个条目。 在下面的屏幕截图中,页面只有一个活动的数据库。

点击数据库的名称可以查看该数据库的安全源、名称和版本。

点击数据库的名称可以查看该数据库的安全源、名称和版本。

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

使用 Start from key 文本字段旁的箭头按钮可以在 KVP 的页面之间移动。

展开值并双击可以编辑该值。在您添加、修改或删除值时,这些更改不会实时更新。

点击 refresh 按钮可以更新数据库。 

在 Start from key 文本字段中输入键可以过滤出值小于该值的所有键。

在您添加、修改或删除值时,这些更改不会实时更新。 点击 refresh 按钮 () 可以更新数据库。

点击 Clear Object Store 按钮 () 可以删除数据库中的所有数据。 从 Clear storage 窗格中,点击一次按钮注销服务工作线程并移除其他存储与缓存也可以实现此目标。

Web SQL

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

点击数据库名称可以打开该数据库的控制台。从这里,您可以对数据库执行语句。

点击数据库表可以查看该表的数据。

  • 您无法从这里更新值,但是可以通过数据库控制台(参见上文)更新。

  • 点击列标题可以按该列排序表格。

  • 您对表格的更改不会实时更新。点击 refresh 按钮 () 可以查看更新。

  • 在 Visibile columns 文本字段中输入一个由空格分隔或逗号分隔的列名称列表可以仅显示列表中包含的列。

应用缓存

使用 Application Cache 窗格可以检查通过 Application Cache API 创建的资源和规则。

每一行表示一个资源。

Type 列的值为以下值之一:

  • Master。资源上指示此缓存为其主文件的 manifest 属性。

  • Explicit。此资源在清单中明确列出。

  • Network。指定此资源的清单必须来自网络。

  • FallbackResource 列中的网址作为另一个网址(未在 DevTools 中显示)的回退网址形式列出。

表格底部拥有指示网络连接和应用缓存状态的状态图标。 应用缓存可能拥有以下状态:

  • IDLE。缓存没有新更改。
  • CHECKING。正在提取清单并检查有无更新。
  • DOWNLOADING。正在将资源添加到缓存中。
  • UPDATEREADY。存在新版本的缓存。
  • OBSOLETE。正在删除缓存。

服务工作线程缓存

利用 Application 面板上的 Cache Storage 窗格,您可以检查、修改和调试使用(服务工作线程)Cache API 创建的缓存。 参阅下面的指南获取更多帮助。

清除服务工作线程、存储、数据库和缓存

有时,您只需要擦除给定源的所有数据。利用 Application 面板上的 Clear Storage 窗格,您可以选择性地注销服务工作线程、存储和缓存。要清除数据,只需启用您想要擦除的组件旁的复选框,然后点击 Clear site data。操作将擦除 Clear storage 标签下所列源的所有数据。

chrome开发工具指南(九)的更多相关文章

  1. Chrome 开发工具指南

    Chrome 开发工具指南 谷歌 Chrome 开发工具,是基于谷歌浏览器内含的一套网页制作和调试工具.开发者工具允许网页开发者深入浏览器和网页应用程序的内部.该工具可以有效地追踪布局问题,设置 Ja ...

  2. chrome开发工具指南(一)

    注意:如果你是一个网页开发者同时想要获得最新版本的开发工具,那么你应该使用谷歌浏览器(金丝雀)Canary 版. Chrome 开发者工具 打开Chrome 开发者工具 选择浏览器位于浏览器窗口右上方 ...

  3. chrome开发工具指南(二)

    Application 面板 使用 App Manifest 窗格检查您的网络应用清单和触发 Add to Homescreen 事件. 使用 Service Worker 窗格执行与服务工作线程相关 ...

  4. chrome开发工具指南(十四)

    模拟和测试其他浏览器 您的任务不只局限于确保网站在 Chrome 和 Android 上出色运行.即使 Device Mode 可以模拟 iPhone 等多种其他设备,我们仍鼓励您查看其他浏览器模拟解 ...

  5. chrome开发工具指南(十二)

    使用 Device Mode 模拟移动设备 使用 Chrome DevTools 的 Device Mode 打造移动设备优先的完全自适应式网站.了解如何使用 Device Mode 模拟多种设备及其 ...

  6. chrome开发工具指南(七)

    检查动画 使用 Chrome DevTools 动画检查器检查和修改动画. 通过打开动画检查器捕捉动画.检查器会自动检测动画并将它们分类为多个组. 通过慢速播放.重播或查看动画源代码来检查动画. 通过 ...

  7. chrome开发工具指南(六)

    检查和编辑页面与样式 使用 Chrome DevTools 的 Elements 面板检查和实时编辑页面的 HTML 与 CSS. 在 Elements 面板中检查和实时编辑 DOM 树中的任何元素. ...

  8. chrome开发工具指南(十三)

    模拟传感器:地理定位与加速度计 由于大多数桌面设备都没有 GPS 芯片和加速度计,所以测试它们比较困难.Chrome DevTools 的 Sensors 模拟窗格可以通过模拟常见的移动设备传感器来降 ...

  9. chrome开发工具指南(十一)

    检查资源 使用 Application 面板的 Frames 窗格可以按框架组织资源. 您也可以在 Sources 面板中停用 Group by folder 选项,按框架查看资源. 要按网域和文件夹 ...

随机推荐

  1. Nlpir Parser智能语义平台全文搜索

    全文索引用于处理大文本集合,利用它人们可以在海量文本中快速获取需要的信息.全文检索系统是按照全文检索理论建立起来的用于提供全文检索服务的软件系统.一般来说,全文检索需要具备建立索引和提供查询的基本功能 ...

  2. Linux 系统下安装 rz/sz 命令及使用说明

    Linux 系统下安装 rz/sz 命令及使用说明 rz/sz命令,实现将本地的文件上传到服务器或者从服务器上下载文件到本地,但是很多Linux系统初始并没有这两个命令,以下为安装和使用的具体步骤: ...

  3. ASP.NET Core 源码学习之 Logging[2]:Configure

    在上一章中,我们对 ASP.NET Logging 系统做了一个整体的介绍,而在本章中则开始从最基本的配置开始,逐步深入到源码当中去. 默认配置 在 ASP.NET Core 2.0 中,对默认配置做 ...

  4. 给定一个无序数组arr,求出需要排序的最短子数组长度。例如: arr = [1,5,3,4,2,6,7] 返回4,因为只有[5,3,4,2]需要排序。

    思路 首先从左往右遍历,然后设定一个Max,如果遍历的过程中array[i]大于Max,则置换Max,若小于Max,则指定 k 记录该位置. 然后再从右往左遍历,设定一个Min,在遍历的过程中arra ...

  5. CentOS Linux 系统 安装oracle 11g

    CentOS Linux 系统 安装oracle 11g 在Linux系统上安装oracle是比较麻烦,需要配置各种变量啥的,o(︶︿︶)o ,但是没办法,有些东西你总的去接触,而且接触理解的越早越深 ...

  6. MySQL的grant,revoke使用

    MySQL 赋予用户权限命令的简单格式可概括为: grant 权限 on 数据库对象 to 用户 一.grant 普通数据用户,查询.插入.更新.删除 数据库中所有表数据的权利. grant sele ...

  7. laravel 中使用ajax和vue总结

    最近写一个项目是基于laravel框架的,这个框架传言是为艺术而创作的优雅框架,简洁分明的风格,很吸引我,所以最近研究比较多.本次就是基于该框架然后将Vue插件加入实现一定的功能,vue插件本身强大, ...

  8. SVN 、Git、Github的使用

    1.1 SVN 总结以及使用建议 每一次保存历史记录实际上就是一次提交 什么时候去保存历史记录? 完成了一个具体的功能模块 代码运行没有bug 当天工作结束提交一次 没有 bug 的前提下去提交一次 ...

  9. mysql数据库密码更改

    先记下,随后继续更改! 方法1: 用SET PASSWORD命令 首先登录MySQL. mysql> set password for 用户名@localhost = password('新密码 ...

  10. ORACLE索引监控的简单使用

    --ORACLE索引监控的简单使用-------------------------2013/11/20 说明:     应用程序在开发时,可能会建立众多索引,但是这些索引的使用到底怎么样,是否有些索 ...