chrome开发工具指南

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 标签下所列源的所有数据。

技术分享

 

以上是关于chrome开发工具指南的主要内容,如果未能解决你的问题,请参考以下文章

chrome开发工具指南

Chrome开发者工具不完全指南:(性能篇)

chrome工具分析

markdown 打字稿...编码说明,提示,作弊,指南,代码片段和教程文章

Chrome-Devtools代码片段中的多个JS库

Python 自动化 - 浏览器chrome打开F12开发者工具自动Paused in debugger调试导致无法查看网站资源问题原因及解决方法,javascript反调试问题处理实例演示(代码片段