Chrome开发者工具

网络篇

打开网络选项卡

网络日志的每一行代表一个资源。默认情况下，资源按时间顺序列出。顶部资源通常是主要的 HTML 文档。底部资源是最后请求的资源。

显示更多信息

网络日志的列是可配置的。您可以隐藏不使用的列。还有许多默认隐藏的列，您可能会发现它们很有用。

模拟较慢的网络连接

您用于构建站点的计算机的网络连接可能比您用户的移动设备的网络连接更快。通过限制页面，您可以更好地了解页面在移动设备上加载所需的时间。

当您想了解首次访问者如何体验页面加载时，长按重新加载然后选择清空缓存并硬性加载。

检查资源的详细信息

单击资源以了解有关它的更多信息。

搜索网络标头和响应

单击搜索。搜索窗格在网络日志的左侧打开。

过滤资源

截取屏幕

跨页面加载保存请求

重放 XHR 请求

通过禁用浏览器缓存来模拟首次访问者

按属性过滤请求

以下是受支持属性的完整列表。

cookie-domain. 显示设置特定cookie 域的资源。
cookie-name. 显示设置特定cookie 名称的资源。
cookie-path. 显示设置特定cookie 路径的资源。
cookie-value. 显示设置特定cookie 值的资源。
domain. 仅显示来自指定域的资源。您可以使用通配符 ( *) 来包含多个域。例如，*.com显示来自所有以 . 结尾的域名的资源.com。DevTools 显示了一个使用它遇到的所有域填充自动完成下拉菜单。
has-response-header. 显示包含指定 HTTP 响应标头的资源。DevTools 使用它遇到的所有响应标头填充自动完成下拉列表。
is. 用于is:running查找WebSocket资源。
larger-than. 显示大于指定大小的资源，以字节为单位。设置的值1000相当于设置的值1k。
method. 显示通过指定 HTTP 方法类型检索的资源。DevTools 使用它遇到的所有 HTTP 方法填充自动完成下拉列表。
mime-type. 显示指定 MIME 类型的资源。DevTools 使用它遇到的所有 MIME 类型填充自动完成下拉列表。
mixed-content. 显示所有混合内容资源 ( mixed-content:all) 或仅显示当前显示的资源 ( mixed-content:displayed)。
priority. 显示优先级与指定值匹配的资源。
resource-type. 显示资源类型的资源，例如图像。DevTools 使用它遇到的所有资源类型填充自动完成下拉列表。
scheme. scheme:http显示通过不受保护的 HTTP ( ) 或受保护的 HTTPS ( )检索到的资源scheme:https。
set-cookie-domain. 显示具有与指定值匹配的属性的Set-Cookie标头的资源。DomainDevTools 使用它遇到的所有 cookie 域填充自动完成。
set-cookie-name. 显示Set-Cookie名称与指定值匹配的标头的资源。DevTools 使用它遇到的所有 cookie 名称填充自动完成。
set-cookie-value. 显示具有Set-Cookie与指定值匹配的标头的资源。DevTools 使用它遇到的所有 cookie 值填充自动完成。
status-code. 仅显示其 HTTP 状态代码与指定代码匹配的资源。DevTools 使用它遇到的所有状态代码填充自动完成下拉菜单。
url. 显示与url指定值匹配的资源。

查看加载事件

DevTools在“网络”面板的多个位置显示事件DOMContentLoaded和事件的时间。load事件DOMContentLoaded为蓝色，load事件为红色。

Chrome开发者工具(二)