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。指定此资源的清单必须来自网络。
  • FallbackResource 列中的网址作为另一个网址(未在 DevTools 中显示)的回退网址形式列出。

表格底部拥有指示网络连接和应用缓存状态的状态图标。 应用缓存可能拥有以下状态:

  • IDLE。缓存没有新更改。
  • CHECKING。正在提取清单并检查有无更新。
  • DOWNLOADING。正在将资源添加到缓存中。
  • UPDATEREADY。存在新版本的缓存。
  • OBSOLETE。正在删除缓存。

服务工作线程缓存

利用 Application 面板上的 Cache Storage 窗格,您可以检查、修改和调试使用(服务工作线程)Cache API 创建的缓存。 参阅下面的指南获取更多帮助。

清除服务工作线程、存储、数据库和缓存

有时,您只需要擦除给定源的所有数据。利用 Application 面板上的 Clear Storage 窗格,您可以选择性地注销服务工作线程、存储和缓存。要清除数据,只需启用您想要擦除的组件旁的复选框,然后点击 Clear site data。操作将擦除 Clear storage 标签下所列源的所有数据。

时间: 2024-08-06 11:53:46

chrome开发工具指南(九)的相关文章

Chrome 开发工具指南

Chrome 开发工具指南 谷歌 Chrome 开发工具,是基于谷歌浏览器内含的一套网页制作和调试工具.开发者工具允许网页开发者深入浏览器和网页应用程序的内部.该工具可以有效地追踪布局问题,设置 JavaScript 断点并可深入理解代码的最优化策略. 适用人群 这篇教程将会带你从头开始使用学习如何利用 Google 提供的组件进行 Chrome 上的相关开发调试工作. 通过本教程,你将学会如何使用这些工具,并且学会如何通过它来分析调试提供的 Demo . 学习前提 在你继续本教程之前,你必须对

chrome开发工具指南(一)

注意:如果你是一个网页开发者同时想要获得最新版本的开发工具,那么你应该使用谷歌浏览器(金丝雀)Canary 版. Chrome 开发者工具 打开Chrome 开发者工具 选择浏览器位于浏览器窗口右上方的菜单栏的工具目录,选择开发者工具选项. 右击页面任何位置并选择审查元素. 开发工具将会在浏览器的下方打开. 有一些快捷键也可以用来打开开发工具: Ctrl + Shift + I ( 或在 Mac 上使用 Cmd + Opt+ I). Ctrl + Shift + J ( 或在 Mac 上使用 C

chrome开发工具指南(七)

检查动画 使用 Chrome DevTools 动画检查器检查和修改动画. 通过打开动画检查器捕捉动画.检查器会自动检测动画并将它们分类为多个组. 通过慢速播放.重播或查看动画源代码来检查动画. 通过更改动画时间.延迟.持续时间或关键帧偏移修改动画. 概览 Chrome DevTools 动画检查器有两个主要用途. 检查动画.您希望慢速播放.重播或检查动画组的源代码. 修改动画.您希望修改动画组的时间.延迟.持续时间或关键帧偏移. 当前不支持编辑贝塞尔曲线和关键帧. 动画检查器支持 CSS 动画

chrome开发工具指南(十一)

检查资源 使用 Application 面板的 Frames 窗格可以按框架组织资源. 您也可以在 Sources 面板中停用 Group by folder 选项,按框架查看资源. 要按网域和文件夹查看资源,请使用 Sources 面板. 在 Network 面板中按名称或其他条件过滤资源. 按框架组织资源 使用 Application 面板的 Frames 窗格可以按框架组织页面的资源. 顶层(上面屏幕截图中的 top)是主文档. 在这下方(例如上面屏幕截图中的 widget2)是主文档的子

chrome开发工具指南(八)

编辑 DOM Chrome DevTools 的 Elements 面板中的 DOM 树视图可以显示当前网页的 DOM 结构.通过 DOM 更新实时修改页面的内容和结构. DOM 定义您的页面结构.每一个 DOM 节点都是一个页面元素,例如,标题节点或段落节点. 通过渲染的 DOM 实时编辑页面的内容和结构. 不过请记住,您无法在 Elements 面板中通过 DOM 更改修改源文件.重新加载页面会清空任何 DOM 树修改. 使用 DOM 断点留意 DOM 更改. 检查元素 使用 Element

chrome开发工具指南(十)

检查和删除 Cookie 从 Application 面板检查和删除 Cookie. TL;DR 查看与 Cookie 有关的详细信息,例如名称.值.网域和大小,等等. 删除单个 Cookie.选定网域的 Cookie 或所有网域的全部 Cookie. 使用 Cookies 窗格可以查看和删除 Cookie.您无法修改 Cookie 值. Cookie 按网域列示.其中包括主文档和所有嵌套的框架. 选择一个"框架组"将显示该组中所有资源.所有框架的所有 Cookie. 请注意,这种分组

Chrome开发工具

你可能已经熟悉了Chrome开发工具的基本功能.: DOM检查器.样式面板和JavaScript控制台. 但也有一些不太为人所知的特性可以显著提高你调试或开发应用的速度. 黑色主题 Chrome开发工具的内置了黑色主题.你可以通过点击开发工具窗口右上角的三点图标,之后点击进入设置页面,切换主题. 有时候我觉得黑色主题让我的眼睛更舒服,并且黑色主题显然看起来更酷一些 :) 选择模式 Chrome开发者工具提供了很多选择元素的方法,其中最快捷的方法就是使用选择模式. 该功能通过点击调试面板左上角的按

Chrome 开发工具 Workspace 使用(转)

前端开发中我们经常要在浏览器中做一些细节调整,比如对 CSS 的微调,最快的方式当然是直接在 Chrome 的开发者工具中调整,但问题在于在控制台中调试好的数值我们还需要再在 CSS 源码中再写一次,效率就低了不少.而 Chrome 的 Workspace 工具就能帮助我们把调试工具中修改的内容自动保存到相应的文件中. 方法也挺简单,下面以调试一个 CSS 文件为例: 打开需要调试的页面,再开启调试工具(F12.alt + command + i),切换到 Sources 选项卡,在 CSS 资

Chrome 开发工具之Sources

Sources面板主要用于查看web站点的资源列表及javascript代码的debug 熟悉面板 了解完面板之后,下面来试试这些功能都是如何使用的. 文件列表 展示当前页面内所引用资源的列表,和平常的文件tree一样. 内容区域 可在该区域查看打开的文件的脚本,也可以在区域内下断点,打断指定执行代码行. 断点方式: 1.在脚本中写入debugger 2.在Sources面板文件内标注断点. debugger: var num = 1; console.log(num); debugger; 效