chrome开发工具指南(九)
检查和管理存储、数据库与缓存
- 查看和修改本地存储与会话存储。
- 检查和修改 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。指定此资源的清单必须来自网络。
Fallback。Resource 列中的网址作为另一个网址(未在 DevTools 中显示)的回退网址形式列出。
表格底部拥有指示网络连接和应用缓存状态的状态图标。 应用缓存可能拥有以下状态:
- IDLE。缓存没有新更改。
- CHECKING。正在提取清单并检查有无更新。
- DOWNLOADING。正在将资源添加到缓存中。
- UPDATEREADY。存在新版本的缓存。
- OBSOLETE。正在删除缓存。
服务工作线程缓存
利用 Application 面板上的 Cache Storage 窗格,您可以检查、修改和调试使用(服务工作线程)Cache API 创建的缓存。 参阅下面的指南获取更多帮助。
清除服务工作线程、存储、数据库和缓存
有时,您只需要擦除给定源的所有数据。利用 Application 面板上的 Clear Storage 窗格,您可以选择性地注销服务工作线程、存储和缓存。要清除数据,只需启用您想要擦除的组件旁的复选框,然后点击 Clear site data。操作将擦除 Clear storage 标签下所列源的所有数据。

chrome开发工具指南(九)的更多相关文章
- Chrome 开发工具指南
Chrome 开发工具指南 谷歌 Chrome 开发工具,是基于谷歌浏览器内含的一套网页制作和调试工具.开发者工具允许网页开发者深入浏览器和网页应用程序的内部.该工具可以有效地追踪布局问题,设置 Ja ...
- chrome开发工具指南(一)
注意:如果你是一个网页开发者同时想要获得最新版本的开发工具,那么你应该使用谷歌浏览器(金丝雀)Canary 版. Chrome 开发者工具 打开Chrome 开发者工具 选择浏览器位于浏览器窗口右上方 ...
- chrome开发工具指南(二)
Application 面板 使用 App Manifest 窗格检查您的网络应用清单和触发 Add to Homescreen 事件. 使用 Service Worker 窗格执行与服务工作线程相关 ...
- chrome开发工具指南(十四)
模拟和测试其他浏览器 您的任务不只局限于确保网站在 Chrome 和 Android 上出色运行.即使 Device Mode 可以模拟 iPhone 等多种其他设备,我们仍鼓励您查看其他浏览器模拟解 ...
- chrome开发工具指南(十二)
使用 Device Mode 模拟移动设备 使用 Chrome DevTools 的 Device Mode 打造移动设备优先的完全自适应式网站.了解如何使用 Device Mode 模拟多种设备及其 ...
- chrome开发工具指南(七)
检查动画 使用 Chrome DevTools 动画检查器检查和修改动画. 通过打开动画检查器捕捉动画.检查器会自动检测动画并将它们分类为多个组. 通过慢速播放.重播或查看动画源代码来检查动画. 通过 ...
- chrome开发工具指南(六)
检查和编辑页面与样式 使用 Chrome DevTools 的 Elements 面板检查和实时编辑页面的 HTML 与 CSS. 在 Elements 面板中检查和实时编辑 DOM 树中的任何元素. ...
- chrome开发工具指南(十三)
模拟传感器:地理定位与加速度计 由于大多数桌面设备都没有 GPS 芯片和加速度计,所以测试它们比较困难.Chrome DevTools 的 Sensors 模拟窗格可以通过模拟常见的移动设备传感器来降 ...
- chrome开发工具指南(十一)
检查资源 使用 Application 面板的 Frames 窗格可以按框架组织资源. 您也可以在 Sources 面板中停用 Group by folder 选项,按框架查看资源. 要按网域和文件夹 ...
随机推荐
- TypeScript02 方法特性【参数种类、参数个数】、generate方法、析构表达式、箭头表达式、循环
1 方法的参数 1.1 必选参数 调用方法时实参的个数必须和定义方法时形参在数量和类型上匹配 /** * Created by Administrator on 2017/8/2 0002. */ f ...
- Unity3D 中材质球(Material)预制体打包成AB(AssetBundle)出现材质丢失问题的解决方案
关于Unity3D中打AB(AssetBundle)资源包,默认是不连Shader一同打包进去的,所以得自行添加,添加方式比较简单,不需要往项目中添加Shader,只是点选一下就可以了,具体实现方式如 ...
- github 或者gitlab 设置添加SSH
克隆项目二种方式: 1. 使用https url克隆, 复制https url 然后到 git clone https-url 2.使用 SSH url 克隆却需要在克隆之前先配置和添加好 SSH ...
- 用vector实现dijkstra
#include <stdio.h> #include <string.h> #include <string> #include <vector> # ...
- gitlab+jenkins持续集成(一)
1. 环境:CentOS7.0,jdk-8u91-linux-x64.rpm,jenkins 2.7.4 ,gitlab 9.2.2 2. 安装jdk,jenkins (rpm -ivh ...
- vue指令v-else示例解析
为 v-if 或者 v-else-if 添加 "else 块". <div id="app"> <p v-if="isRender& ...
- C#使用Xamarin开发可移植移动应用(2.Xamarin.Forms布局,本篇很长,注意)附源码
前言 系列目录 C#使用Xamarin开发可移植移动应用目录 源码地址:https://github.com/l2999019/DemoApp 可以Star一下,随意 - - 一点感想 很意外的,第一 ...
- MarkDown入门指南
标题 标题是每篇文章必备而且最常用的格式. 在Markdown中,如果想将一段文字定义为标题,只需要在这段文字前面加上 #,再在 # 后加一个空格即可.还可增加二.三.四.五.六级标题,总共六级,只需 ...
- ARC和MRC 兼容的单例模式
一.ARC下的单例实现 说明:在用户实例化的方法控制单次执行,同时开放单例的初始化方法. -(instancetype)init{ self=[super init]; if(self){ stati ...
- IOS中的单例设计模式
单例设计模式是IOS开发中一种很重要很常用的一种设计模式.它的设计原理是无论请求多少次,始终返回一个实例,也就是一个类只有一个实例.下面是苹果官方文档中关于单例模式的图片: 如图所示,左边的图是默认的 ...