功能面板
- Elements面板
- 查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。
- Console面板
- 这个包含了所有的源码,除了可以查看错误信息、打印调试信息(console.log())、写一些测试脚本以外,还可以当作Javascript API查看用。
- Sources面板
- Network面板
- 从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息(包括状态、资源类型、大小、所用时间等),可以根据这个进行网络性能优化。
- Application面板
- 记录网站加载的所有资源信息,包括存储数据(Local Storage、Session Storage、IndexedDB、Web SQL、Cookies)、缓存数据、字体、图片、脚本、样式表等。
- Security面板
- 判断当前网页是否安全。
Network
- Name 资源名称,点击名称可以查看资源的详情情况,包括Headers、Preview、Response、Cookies、Timing。
-
Headers 该资源的HTTP头信息。
在Headers标签里面可以看到HTTP Request URL、HTTP Method、Status Code、Remote Address等基本信息和详细的Response Headers、Request Headers以及Query String Parameters或者Form Data等信息。
- General
- Request URL:
- Request Method:
- Status Code:
- Remote Address:
- Referrer Policy:
- Response Headers
- Access-Control-Allow-Origin:
- Content-Length:
- Content-Type:
- Date:
- Server:
- Vary:
- Request Headers
- Accept:
- Accept-Encoding:
- Accept-Language:
- Authorization:
- Connection:
- Host:
- Origin:
- Referer:
- User-Agent:
- General
-
Preview 根据你所选择的资源类型(JSON、图片、文本)显示相应的预览。
-
Response 显示HTTP的Response信息。
-
Timing 显示资源在整个请求生命周期过程中各部分花费的时间。
-
Cookies 显示资源HTTP的Request和Response过程中的Cookies信息。
- Status HTTP状态码。
- Type 请求的资源MIME类型。
- Initiator 标记请求是由哪个对象或进程发起的(请求源)。
- Size 从服务器下载的文件和请求的资源大小。如果是从缓存中取得的资源则该列会显示(from cache)
- Time 请求或下载的时间,从发起Request到获取到Response所用的总时间。
- Watefall 显示所有网络请求的可视化瀑布流(时间状态轴),点击时间轴,可以查看该请求的详细信息,点击列头则可以根据指定的字段可以排序。
Watefall标签
- Queuing 排队的时间花费。
- Stalled 从HTTP连接建立到请求能够被发出送出去(真正传输数据)之间的时间花费。
- Waiting (Time to first byte (TTFB)) 是最初的网络请求被发起到从服务器接收到第一个字节这段时间,它包含了TCP连接时间,发送HTTP请求时间和获得响应消息第一个字节的时间.