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

  • 查看和修改本地存储与会话存储。
  • 检查和修改 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. mysql导出指定字段或指定数据到文件中

    使用mysqldump把mysql数据库的数据导出到文件中还是挺方便的:比如说要导出baijunyao数据库: // mysqldump -u用户名 -p 数据库名 [表名]> 导出的文件名 m ...

  2. R语言 write.xlsx() 写入同一excel,及同一sheet注意

    write.xlsx(x, file, sheetName="Sheet1", col.names=TRUE, row.names=TRUE, append=FALSE, show ...

  3. 游走[HNOI2013]

    [题目描述] 一个无向连通图,顶点从1编号到N,边从1编号到M. 小Z在该图上进行随机游走,初始时小Z在1号顶点,每一步小Z以相等的概率随机选 择当前顶点的某条边,沿着这条边走到下一个顶点,获得等于这 ...

  4. 为Tornado框架加上基于Redis或Memcached的session 【第三方】

    Tornado 没有session,只有cookie_secret,这在一些情况下是不利于开发的.所有我们可以给Tornado加上session的功能. 这篇文章讲解的是依靠第三方包来实现.以后的文章 ...

  5. python中的类属性和实例属性

    属性就是属于一个对象的数据或者函数,我们可以通过句点(.)来访问属性,同时 Python 还支持在运作中添加和修改属性. 我们先来看看类里面的普通字段: class Test(object): nam ...

  6. NYOJ--113--字符串替换

    /* Name: NYOJ--113--字符串替换 Author: shen_渊 Date: 18/04/17 15:41 Description: 字符串水题,秒过 */ #include<b ...

  7. git入门大全

    前言 以前写个一个git小结,但是实际上并不够用.于是结合实际工作上碰到的一些情况,参考了一些资料,重新总结了一下.目标是在日常工作中不用再去查阅其他的资料了,如果有什么遗漏或者错误的地方,请评论指出 ...

  8. RabbitMQ 使用(一)

    RabbitMQ中的使用 这篇文章将会介绍关于RabbbitMQ的使用,并且使用的是kombo(客户端的Python实现)来实现: 安装 如果使用的是mac安装的话,可以先安装到指定的位置,接着配置命 ...

  9. echarts之词云随机颜色的配置

    echarts中的词云字体产生随机颜色,最主演的是要引入worldcloud.js,另外还要有jquery.js文件与echarts.js文件的引入,通过配置即可实现词云随机颜色的产生.下面为大家介绍 ...

  10. C/C++ 知识点---存储区

    C/C++ 知识点---存储区 在C++中,内存分成5个区,他们分别是堆.栈.自由存储区.全局/静态存储区和常量存储区.    栈,就是那些由编译器在需要的时候分配,在不需要的时候自动清楚的变量的存储 ...