chrome 清空network_Chrome DevTools——Network篇

Chrome的开发者工具网络面板主要是资源是否按照预期被下载或者被上传。

重点提前概述：

Network Panel 网络面板主要用来确认资源下载情况以及查看资源的属性信息网络上的请求都是对资源的请求，CSS、JS以及HTML页面等。被请求的资源包括资源本身，如：HTML页面，以及资源属性Header头部信息等模拟资源请求的网络速度，手机3G信息等，反馈网页情况模拟只访问部分资源，Blocking其中某些资源请求对资源进行筛选，只关注自己需要的资源信息。注：如果你和我一样正在寻找提高页面加载性能的方法，不要从网络面板开始。有许多类型的负载性能问题与网络活动无关。从审计面板Audit Panel开始，因为它给你有针对性的建议如何改善你的页面。

01打开网络面板

快捷键：Control + Shift + J (Windows)打开DevTools中的Console窗口

2. 点击Network 的Tab页，如图：

现在网络面板是空的。这是因为DevTools只有在打开时才能记录网络活动，而在打开DevTools后没有发生网络活动，所以Network Panel是空的。

02记录网络活动

查看一个页面造成的网络活动

刷新页面。在网络日志里会打印所有网络活动

其中，网络日志中每一行代表一个资源。默认资源是按照年代进行排列。最顶层资源通常是主页面文档。底层资源是最终请求的内容。

每一列标识资源的本身信息。

Status: HTTP 返回码

Type: 资源类型

Initiator: 造成此条资源被请求的原因。点击Initiator中的链接，可以访问造成此次请求的源代码

Time: 此次请求花费时间

Waterfall: 请求的不同阶段的图形表示。鼠标放上去可以查看过程的分解，每个阶段的记录。

03更多资源信息

网络日志的很多列是可以配置的。你可以隐藏其中一些不想用的列，也可以启用已经隐藏起来的列。

右键单击网络日志表的标题并选择Domain。可以显示每个资源的域。