前端开发者工具

功能面板

1. Elements面板

• 查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。

2. Console面板

• 这个包含了所有的源码,除了可以查看错误信息、打印调试信息(console.log())、写一些测试脚本以外，还可以当作Javascript API查看用。

3. Sources面板
4. Network面板

• 从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化。

5. Application面板

• 记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。

6. Security面板

• 判断当前网页是否安全。

Network

1. 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:

• Preview 根据你所选择的资源类型（JSON、图片、文本）显示相应的预览。

• Response 显示HTTP的Response信息。

• Timing 显示资源在整个请求生命周期过程中各部分花费的时间。

• Cookies 显示资源HTTP的Request和Response过程中的Cookies信息。

3. Status HTTP状态码。
4. Type 请求的资源MIME类型。
5. Initiator 标记请求是由哪个对象或进程发起的（请求源）。
6. Size 从服务器下载的文件和请求的资源大小。如果是从缓存中取得的资源则该列会显示(from cache)
7. Time 请求或下载的时间，从发起Request到获取到Response所用的总时间。
8. Watefall 显示所有网络请求的可视化瀑布流(时间状态轴)，点击时间轴，可以查看该请求的详细信息，点击列头则可以根据指定的字段可以排序。

Watefall标签

• Queuing 排队的时间花费。
• Stalled 从HTTP连接建立到请求能够被发出送出去(真正传输数据)之间的时间花费。
• Waiting (Time to first byte (TTFB)) 是最初的网络请求被发起到从服务器接收到第一个字节这段时间，它包含了TCP连接时间，发送HTTP请求时间和获得响应消息第一个字节的时间.