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 选项,按框架查看资源. 要按网域和文件夹 ...
随机推荐
- Java中使用POI读取大的Excel文件或者输入流时发生out of memory异常参考解决方案
注意:此参考解决方案只是针对xlsx格式的excel文件! 背景 前一段时间遇到一种情况,服务器经常宕机,而且没有规律性,查看GC日志发生了out of memory,是堆溢出导致的,分析了一下堆的d ...
- [js高手之路] es6系列教程 - 不定参数与展开运算符(...)
三个点(...)在es6中,有两个含义: 用在形参中, 表示传递给他的参数集合, 类似于arguments, 叫不定参数. 语法格式: 在形参面前加三个点( ... ) 用在数组前面,可以把数组的值 ...
- C语言程序设计进阶 翁恺 第4周编程练习
第4周编程练习 查看帮助 返回 第4周编程练习 依照学术诚信条款,我保证此作业是本人独立完成的. 温馨提示: 1.本次作业属于Online Judge题目,提交后由系统即时判分. 2.学生可以在作业 ...
- 读书笔记 之《Thinking in Java》(对象、集合)
一.前言: 本来想看完书再整理下自己的笔记的,可是书才看了一半发现笔记有点多,有点乱,就先整理一份吧,顺便复习下前面的知识,之后的再补上. 真的感觉,看书是个好习惯啊,难怪人家说"书籍是人类 ...
- 等待与希望,.NET Core 的发展壮大
前几天微软推出了.net core 2.0, 尽管我现在使用的技术栈和微软已经没有一丝瓜葛, 但碰到微软放大招,心里还是瘙痒难当,忍不住偷偷摸摸的体验了一把. 谁叫我是通过微软系技术入的行呢,旧情难忘 ...
- css3文本字体
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- config OSX firewall programmatically
osx firewall configuration file is : /Library/Preferences/com.apple.alf.plist the default plist and ...
- java基础(数据类型,运算符)
java基础之数据类型(变量) java中存在的数据有常量和变量 常量:在程序执行的过程中其值不可以发生改变 常量的分类 字面值常量 字面值常量的分类 常量 描述 字符串常量 用双引号括起来的内容 整 ...
- 使用Visual Studio 2017开发python,并在iis上部署Python Django
作为宇宙第一IDE,怎么可以不支持python开发呢? 1.Visual Studio Installer 扩展Python开发 开始菜单中打开Visual Studio Installer,点修改. ...
- 家中路由添加静态IP映射(二)
家中的路由器普遍通过DHCP向连接到此路由器的客户主机提供IP配置方式,但是一般都是动态IP: 假设需要静态IP配置到个人电脑,就要在路由器上进行配置IP和MAC地址映射关系.如上篇截图.路由器端配置 ...