谷歌浏览器开发者工具使用教程

基本用法

打开关闭

常用配置

元素面板(Elements)

审查、修改元素

查看、修改样式

查看、管理事件

终端面板(Console)

审查变量

运行代码

网络面板(Network)

过滤、审查网络请求

网速限制、录制等

资源面板(Resources)

审查、管理 Cookie

查看、管理 LocalStorage

源码面板(Sources)

查看、格式化源代码

实时 Javascript 调试

应用请求存储面板(Application)

Application 面板可以让您查看和管理网页加载的所有资源，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。

可以使用这些资源来分析和调试网页的功能和性能。

Application 面板的主要功能有：

• 查看和编辑存储数据，例如 Local Storage、Session Storage、IndexedDB、Web SQL、Cookies 等。您可以添加、修改、删除、清空或导出这些数据，以及查看它们的大小和有效期。
• 查看和管理缓存数据，例如 Cache Storage、Application Cache 等。您可以刷新、删除、或导出这些缓存，以及查看它们的大小和内容。
• 查看和修改 Manifest 文件，以及检查 PWA 的安装和更新状态。您可以查看 Manifest 文件的信息，例如名称、图标、描述、启动 URL 等，以及修改它们的值。您也可以查看 PWA 的安装和更新事件，以及模拟不同的安装场景。
• 查看和管理 Service Workers，以及 Background Services。您可以查看 Service Workers 的状态，例如安装、激活、更新等，以及暂停、恢复、停止、或卸载它们。您也可以查看 Background Services 的类型，例如 Background Fetch、Background Sync 等，以及它们的状态和结果。
• 查看和管理 Frames，以及它们的资源。您可以查看 Frames 的层级结构，以及它们的源、安全性、策略等信息。您也可以查看 Frames 加载的资源，例如字体、图片、脚本、样式表等，以及它们的大小、类型、内容等信息。

性能分析面板(Profiles)

Profiles 面板可以让您分析网页的性能，例如 CPU 的使用情况，内存的分配和回收，以及 JavaScript 的执行时间。您可以使用不同的分析器来收集和查看不同类型的数据，例如 CPU 分析器，堆快照分析器，和内存分配分析器。您可以使用这些数据来发现和优化网页的性能瓶颈，提高用户体验。

网页综合的评估和诊断面板(Audits)

Audits 面板可以让您对网页进行综合的评估和诊断，包括网络利用率，网页性能，可访问性，最佳实践，和搜索引擎优化等方面。

可以选择不同的类别和设备类型来运行审计，并查看审计报告中的得分，建议，和详细信息。可以使用这些信息来改进网页的质量，兼容性，和可用性。