Chrome开发者工具(Chrome DevTools)

谷歌开发者工具中功能模块有元素（ELements）、控制台（Console），源代码（Sources），网络（Network），Performance（性能面板），Memory（内存面板），Application（应用面板），Security（安全面板）

 

打开Chrome浏览器，按F12或Ctrl+Shift+i打开

 

Elements展示的是页面的各个组成，主要内容有HTML+CSS+JavaScript

Network（网络面板）：从发起网页页面请求Request后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），并可以根据这个进行网络性能优化。Network 面板记录页面上每个网络操作的相关信息，包括详细的耗时数据、HTTP 请求与响应标头和 Cookie。

1 controls控件中从左往右（1）监控网络请求；（2）清除网络请求列表；（3）过滤网络资源请求；Preserve log 日志保存；Disable cache 关闭缓存信息；

 

3 Overview：显示获取到资源的时间轴信息

 

5 Summary： 显示总的请求数、数据传输量、加载时间信息等

4 Requests Table：按资源获取的前后顺序显示所有获取到的资源信息，列表中有Name（资源名），Status（响应状态），Type（响应数据类型），Size（响应数据大小），Time（响应时间）

点击资源名可以查看该资源的详细信息。

Preview：预览面板，用于资源的预览；Response：响应信息面板包含资源还未进行格式处理的内容；Timing：资源请求的详细信息花费时间；