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 选项,按框架查看资源. 要按网域和文件夹 ...
随机推荐
- 灵玖软件NLPIRParser智能文本聚类
随着互联网的迅猛发展,信息的爆炸式增加,信息超载问题变的越来越严重,信息的更新率也越来越高,用户在信息海洋里查找信息就像大海捞针一样.搜索引擎服务应运而生,在一定程度上满足了用户查找信息的需要.然而互 ...
- LoadRunner性能测试-loadrunner事务
事务(Transaction): 简单来说就是用来模拟用户的一个相对完整的业务过程.添加事务,是用来衡量响应时间的重要方法.我们可以通过事务计时来对不同压力负载下的性能指标进行对比. 插入事务的方法: ...
- CentOS 下mysql ERROR&n…
CentOS 下mysql ERROR 1045: Access denied for user: 'root@localhost' (Using password: NO) 描述:在操作数据库时会出 ...
- 移动端https抓包那些事--进阶篇
上一次和大家介绍了手机端https抓包的初级篇,即在手机未root或者未越狱的情况下如何抓取https流量,但是当时分析应用时会发现,好多应用的https的流量还是无法抓取到,这是为什么呢? 主要原因 ...
- windows下Ubuntu虚拟机联网配置 + Ubuntu虚拟机代理配置
Ubuntu虚拟机网络连接方式设置: http://blog.csdn.net/u013052460/article/details/50039937 or http://www.gezila.com ...
- 【思维】【水】 南阳oj 喷水装置(一)
描述 现有一块草坪,长为20米,宽为2米,要在横中心线上放置半径为Ri的喷水装置,每个喷水装置的效果都会让以它为中心的半径为实数Ri(0<Ri<15)的圆被湿润,这有充足的喷水装置i(1& ...
- python学习===实现定时发送,方法一
#比如每3秒打印一次helloworld:from threading import Timer def printHello(): print "Hello World" t = ...
- MATLAB实现聚类
%% Cluster x = data; % 传入数据 [h, w] = size(x); num_cluster = 12; % 聚类数 T = clusterdata(x, num_cluster ...
- SSH服务(一)
一.初始SSH SSH是标准的网络协议,可用于大多数UNIX操作系统,能够实现字符界面的远程登录管理,它默认使用22号端口,采用密文的形式在网络中传输数据,相对于通过明文传输的Telnet,具有更高的 ...
- CSS基础语法
一.CSS常用选择器 前言: 页面中,所有的CSS代码,需要写入到<style></style>标签中. style标签的type属性应该选择"text/css&qu ...