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 选项,按框架查看资源. 要按网域和文件夹 ...
随机推荐
- [补档]Cube
Cube 题目 给你一个n×m的棋盘,有一个1×1×2的长方体竖直放在(1,1)上,你可以将其在棋盘上滚动,你的目标是让其竖直放在(n,m)上,问至少需要多少次操作.(放倒.竖直.翻滚) INPUT ...
- react学习01
react react render()函数返回只能是一个标签(里面可以包其他东西) state(状态) vs props(属性) state 改变,视图改变,state是一个组件里面的状态,然后pr ...
- 异步加载回来的数据不受JS控制了
写成下面这种方式时,异步加载回来的数据不受JS控制 $(."orderdiv").click(function(){ $(this).find(".orderinfo&q ...
- 初学Python之 字符串 索引 分片
字符串是字符的有序集合,可以通过其位置来获得具体的元素. 在python中,字符串中的字符是通过索引来提取的,索引从0开始. python可以取负值,表示从末尾提取,最后一个为-1,倒数第二个为-2, ...
- appach-maven-3.5.0配置与下载
今天需要搭建javaweb开发的环境,需要配置maven.弄了半天终于配置好了.蛋疼的一批.楼主用的是win10的系统.不知道Linux下的也是不是这么坑! 首先,需要把maven的包下载下来.进入h ...
- 在django中集成ckeditor富文本
目前用的比较多的富文本插件有百度的ueditor.ckeditor.kindeditor等,其中ueditor和kindeditor比较美观,ckeditor的皮肤较少.但是ueditor加载较慢,k ...
- ThinkSNS+ 基于 Laravel master 分支,从 1 到 0,再到 0.1
什么是 ThinkSNS+ 09 年,由北京的团队开发了 ThinkSNS 涉足社交开源行业.这么多年累计不少客户.2014-2016,两年都在维护和开发之前基于 TP 的 ThinkSNS , 慢慢 ...
- Hadoop之HelloWorld
Hadoop开始: 1. 下载最新的发行版,解压到你喜欢的路径. 2. 配置,Hadoop的配置文件位于-/hadoop/conf/ 目录下.这里我先只配置了core-site.xml文件. < ...
- Qt实现冒泡提示框
通过QLabel创建类似冒泡方式的提示框(提示框显示位置为父类控件居中位置,具体可根据需要自行修改),鼠标停留提示框界面时查看信息,离开时自动淡化消失的效果: 头文件定义 #ifndef _TTipW ...
- Linux工具参考篇(网摘)
Linux工具参考篇 原文出处:[Linux Tools Quick Tutorial] 1. gdb 调试利器 2. ldd 查看程序依赖库 3. lsof 一切皆文件 4. ps 进程查看器 5. ...