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 选项,按框架查看资源. 要按网域和文件夹 ...
随机推荐
- Android开发之监听器
一直都想进行安卓开发,最近上手了Android.刚开始学习一些基本控件,学习Android就如同进入一个新的世界,印象最深的是这个世界的规则. 最近学习了监听器,对于这个我的一点理解是监听键盘活动 B ...
- Cocoapods 应用第二部分-私有库相关
我们在这里,使用的是 第一部分使用pod lib create YohunlUtilsPod 创建的framework工程来说明.其创建过程在此就不重复了,当然你也可以下载我已经创建好的demo ht ...
- 找不到包含 OwinStartupAttribute 的程序集。 - 找不到包含 Startup 或 [AssemblyName].Startup 类的程序集。
打开web.config添加 <add key="owin:appStartup" value="false" /> <add key=&qu ...
- Spring思维导图(MVC篇)
写在前面 生活就像海洋,只有意志坚强的人才能到达彼岸. 已经很久没有发文章了呀,想必大家都挂念我了,哈哈. 温故而知新,今天一起来复习一下spring mvc的内容吧. spring mvc简介与运行 ...
- EF对于已有数据库的Code First支持
EF对于已有数据库的Code First支持 原文链接 本文将逐步介绍怎样用Code First的方式基于已有数据库进行开发.Code First支持你使用C#或者VB.Net定义类.并使用数据模型标 ...
- Redis-入门笔记-15min带你一览redis
如果转载,请注明博文来源: www.cnblogs.com/xinysu/ ,版权归 博客园 苏家小萝卜 所有.望各位支持! 少年入门笔记,整理出来一起入坑!入门的视屏 ...
- SVN 、Git、Github的使用
1.1 SVN 总结以及使用建议 每一次保存历史记录实际上就是一次提交 什么时候去保存历史记录? 完成了一个具体的功能模块 代码运行没有bug 当天工作结束提交一次 没有 bug 的前提下去提交一次 ...
- MySQL数据库IO问题
--MySQL数据库IO问题 ----------------------2014/05/25 看http://www.mysqlperformanceblog.com 的时候,发现Perco ...
- C++算法接口使用参考
C++算法接口参考 算法参考:[algorithm] 编译:g++ -std=c++11 xxx_algorithm.cpp 运行:./a.out 1.保持原序列运算 all_of template ...
- PHP数组的基本操作及遍历数组的经典操作
<?php 索引数组//数组第一种定义 $arr = array(1,2,3);var_dump($arr); //数组第二种定义$arr = [1,2,3];var_dump($arr); / ...