Chrome DevTools

第一篇  第二篇  第三篇  第四篇

存储【storage】 

查看、编辑和删除 cookie 

HTTP Cookie 主要用于管理用户会话、存储用户个性化偏好以及跟踪用户行为。 它们也是您在网络上看到的所有那些令人讨厌的“此页面使用 cookie”同意表的原因。 本指南将教您如何使用 Chrome DevTools 查看、编辑和删除页面的 cookie。 

打开 Cookie 窗格 

    单击【Application】选项卡以打开应用程序面板。 在【Storage】下展开 Cookies，然后选择一个来源。 

字段 

Cookies 表包含以下字段： 

    【Name】，cookie 的名称。 

    【Value】， cookie 的值。

    【Domain】，允许接收 cookie 的主机。 

    【Path】，为了发送 Cookie 标头，请求的 URL 中必须存在的 URL。 

    【Expires / Max-Age  到期/最大年龄】， cookie 的到期日期或最长期限。 对于 [会话 cookie][6]，此值始终为会话。

    【Size】，cookie 的大小，以字节为单位。

    【Http】，如果为 true，则该字段表示 cookie 只能通过 HTTP 使用，并且不允许修改 JavaScript。

    【Secure】， 如果为 true，则此字段表示 cookie 只能通过安全的 HTTPS 连接发送到服务器。

    【SameSite  同站点】， 如果 cookie 使用实验性 [SameSite] 属性，则包含 [严谨 strict] 或 [宽松 lax]。 

    【Priority 优先事项】， 如果使用已弃用的 cookie Priority 属性，则包含低、中（默认）或高。

过滤cookies 

    使用过滤器文本框按名称或值过滤 cookie。 不支持按其他字段过滤。 

编辑cookies 

    Name、Value、Domain、Path 和 Expires / Max-Age 字段是可编辑的。 双击字段进行编辑。 

删除cookies

    选择一个cookie，然后单击【Delete Selected】以删除该cookie。 单击【Clear All】以删除所有 cookie。

查看和编辑本地存储

    本指南向您展示如何使用 Chrome DevTools 查看、编辑和删除 localStorage 键值对。 

查看 localStorage 键和值 

    1，单击应用程序选项卡以打开应用程序面板。 展开本地存储菜单。 单击域以查看其键值对。单击表格的一行以在表格下方的查看器中查看值。

创建一个新的 localStorage 键值对

    双击表格的空白部分。 DevTools 创建一个新行并将光标集中在 Key 列中。 

编辑 localStorage 键或值

    双击“键”或“值”列中的单元格以编辑该键或值。 

删除 localStorage 键值对

从控制台与 localStorage 交互

    如果您想访问除您所在页面之外的域的 localStorage 键值对，请使用 JavaScript 上下文菜单更改控制台的 JavaScript 上下文。 

    在控制台中运行 localStorage 表达式，就像在 JavaScript 中一样。

查看和更改 IndexedDB 数据

查看 IndexedDB 数据 

    单击【Application】选项卡以打开【Application】面板。 展开 IndexedDB 菜单以查看哪些数据库可用。 

    单击数据库以查看其来源和版本号。 

    单击对象存储以查看其键值对。 

    单击“值”列中的单元格以展开该值。 

    单击一个索引，可根据该索引的值对对象存储进行排序。 

刷新 IndexedDB 数据 

    应用程序面板中的 IndexedDB 值不会实时更新。 查看对象存储时单击【Refresh】刷新其数据，或查看数据库并单击【Refresh database】刷新所有数据。 

编辑 IndexedDB 数据 

使用片段编辑 IndexedDB 数据 

    Snippets 是一种在 DevTools 中存储和运行 JavaScript 代码块的方法。 当您运行代码段时，结果会记录到控制台。 您可以使用 Snippet 来运行编辑 IndexedDB 数据库的 JavaScript 代码。 

删除 IndexedDB 数据 

    删除 IndexedDB 键值对 

    删除对象存储中的所有键值对 

    删除 IndexedDB 数据库

    删除所有 IndexedDB 存储 

    打开清除存储窗格。确保启用了 IndexedDB 复选框。单击清除站点数据。

查看和编辑会话存储

查看 sessionStorage 键和值 

    单击【Application】选项卡以打开【Application】面板。 展开会话存储菜单。 

    单击域以查看其键值对。 

    单击表格的一行以在表格下方的查看器中查看值。 

创建一个新的 sessionStorage 键值对

    双击表格的空白部分。 DevTools 创建一个新行并将光标集中在 Key 列中。 

编辑 sessionStorage 键或值 

    双击“键”或“值”列中的单元格以编辑该键或值。 

删除 sessionStorage 键值对 

从控制台与 sessionStorage 交互 

    如果您想访问除您所在页面之外的域的 sessionStorage 键值对，请使用 JavaScript 上下文菜单更改控制台的 JavaScript 上下文。 

    在控制台中运行 sessionStorage 表达式，就像在 JavaScript 中一样。 

使用 Chrome DevTools 查看应用程序缓存数据

查看应用程序缓存数据 

    展开应用程序缓存部分并单击缓存以查看其资源。 

    表的每一行代表一个缓存资源。 

    Type 列代表资源的类别： 

        【Master】，资源的 manifest 属性表明这个缓存资源的主。 

        【Explicit 明确的】， 此资源已明确列在清单中。

        【Network】， 清单指定此资源必须来自网络。

        【Fallback 倒退】， 该 URL 是另一个资源的后备。 其他资源的 URL 未在 DevTools 中列出。

    在表格底部有状态图标，指示您的网络连接和应用程序缓存的状态。 应用程序缓存可以具有以下状态： 

        【IDLE】， 缓存没有新的变化。

        【CHECKING】， 正在获取清单并检查更新。

        【DOWNLOADING】，正在将资源添加到缓存中。

        【UPDATEREADY 更新就绪】， 新版本的缓存可用。

        【OBSOLETE 过时的】， 正在删除缓存。

查看 Web SQL 数据 

查看 Web SQL 数据 

    单击【Application】选项卡以打开【Application】面板。 展开 Web SQL 部分以查看数据库和表。 在下面的图 1 中，【html5meetup】 是一个数据库，而【rooms】是一个表。 

    单击表可查看该表的数据。

编辑 Web SQL 数据 

    查看 Web SQL 表时，您无法编辑 Web SQL 数据。 但是您可以从 Web SQL 控制台运行编辑或删除表的语句。

运行 Web SQL 查询 

    单击数据库以打开该数据库的控制台。键入 Web SQL 语句，然后按 Enter 运行它。 

刷新 Web SQL 表

    DevTools 不会实时更新表。 要更新表中的数据：点击【Refresh】。 

过滤出 Web SQL 表中的列 

    使用可见列文本框指定要显示的列。 以 CSV 列表的形式提供列名称。 

删除所有 Web SQL 数据 

    打开清除存储窗格。确保启用了 Web SQL 复选框。 

    单击清除站点数据。 

查看缓存数据 

查看缓存数据 

    单击【Application】选项卡以打开【Application】面板。 展开缓存存储部分以查看可用缓存。 

    单击缓存以查看其内容。 

    单击资源以在表下方的部分中查看其 HTTP 标头。 

    单击预览以查看资源的内容。 

刷新资源 

    单击要刷新的资源。 DevTools 将其突出显示为蓝色以表明它已被选中。点击【Refresh】。 

过滤资源 

    使用按路径过滤文本框过滤掉与您提供的路径不匹配的任何资源。 

删除资源 

    单击要删除的资源。 DevTools 将其突出显示为蓝色以表明它已被选中。点击【Delete Selected】。 

删除所有缓存数据 

打开应用程序 > 清除存储。确保启用缓存存储复选框。

   单击清除站点数据。 

使用【Issues】选项卡查找并修复问题 

    Chrome DevTools 中的问题选项卡减少了控制台的通知疲劳和混乱。 使用它来查找浏览器检测到的问题的解决方案，例如 cookie 问题和混合内容。

打开问题选项卡 

    单击黄色警告栏中的【Go to Issues】按钮。 

    或者，从更多工具菜单中选择问题。 

    进入【Issues】选项卡后，如有必要，请单击【Reload page】按钮。 

    您会注意到控制台中报告的问题。 

查看问题选项卡中的项目 

    【Issues】选项卡以结构化、聚合和可操作的方式显示来自浏览器的警告。 

    单击【Issues】选项卡中的项目以获取有关如何解决问题和查找受影响资源的指导。 

    每个项目有四个组成部分：1，描述问题的标题。2，提供上下文和解决方案的描述。3，AFFECTED RESOURCES 部分，链接到适当的 DevTools 上下文中的资源，例如 Network 面板。4，进一步指导的链接。 

    单击受影响的资源项目以查看详细信息。  

在上下文中查看问题 

    单击资源链接以在 DevTools 中的适当上下文中查看该项目。 在此示例中，单击 samesite-sandbox.glitch.me 以显示附加到该请求的 cookie。 

    滚动查看有问题的项目：在本例中为 cookie ck02。 将鼠标悬停在右侧的信息图标上可查看问题以及解决方法。 

在命令菜单中运行命令

    命令菜单提供了一种快速的方式来导航 Chrome DevTools UI 并完成常见任务，例如禁用 JavaScript。 您可能熟悉 Visual Studio Code 中称为命令面板的类似功能，它是命令菜单的最初灵感来源。 

打开命令菜单 

    按 Control+Shift+P 或 Command+Shift+P (Mac)。 或者，选择运行命令【Run Command】。 

查看其他可用操作 

    如果您使用打开命令菜单中概述的工作流程，命令菜单将打开，命令菜单文本框前面带有 > 字符。 

    删除【>】字符并键入【?】查看命令菜单中可用的其他操作。