发表于 | 分类于 | 1 | 阅读次数 785

Windows 浏览器中的F12开发者模式多用于网页调试，用于web站点故障分析也非常好用，千里之行，始于足下，往下看(记)吧

F12开发者模式的几个基本组成模块：

  • 元素（Elements）：用于查看或修改HTML元素的属性、CSS属性、监听事件、断点（DOM断点：在JavaScript调试中，我们经常使用到断点调试，其实在DOM结构的调试中，我们也可以使用断点方法，这就是DOM Breakpoint（DOM 断点））

  • 控制台（Console）：控制台一般用于执行一次性代码，查看JavaScript对象，查看调试日志信息或异常信息。

  • 源代码（Sources）：该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码，此外最重要的是可以调试JavaScript源代码，可以给JS代码添加断点等。

  • 网络（Network）：网络页面主要用于查看header等与网络连接相关的信息。

  • Network 标签
    字段详解
    Name： 资源路径/名称，可查看加载的资源名称及URL路径
    Status： http状态码
    Type： 资源的类型，html、css、js等
    Initiator： 资源的请求源，标识该资源是由哪个对象或进程发起请求的
    Size： 资源大小，本地有缓存是标识为 disk cache
    Time： 加载耗时，请求或下载的时间，从发起Request到获取到Response所用的总时间
    Waterfall： 时间流，加载资源耗时的可视化的瀑布流
    .
    其他非默认字段：
    Url：资源对应URL
    Domain：资源URL对应域名
    Method：请求方法，GET、POST等
    Protocol：请求协议。如http/1.1 H2等
    Remote Address：请求目标IP，有可能出现此地址为内网IP，一般是客户端配置了代理
    image.png
  • Network 标签
  • 资源加载耗时
    requests：查看请求的总数量
    transferred：请求/网络传输资源大小
    resource：资源实际大小
    Finish：页面上所有 http 请求发送到响应完成的时间
    DOMContentLoaded：DOM树构建完成。即HTML页面由上向下解析HTML结构到末尾封闭标签 
    Load：页面加载完毕，DOM树构建完成后，继续加载html/css 中的图片等外部资源，加载完成后视为页面加载完毕
    DOMContentLoaded 会比 Load 时间小，两者时间差大致等于外部资源加载的时间
    image.png
  • Network 标签
  • 资源加载慢、网站加载慢
    Queueing：请求文件顺序的排序。浏览器是有线程限制的，发请求也不能所有的请求同时发送，会将请求加入队列中（Chrome的最大并发连接数是6）。此参数表示从添加到待处理队列，到实际开始处理的时间间隔标示

Stalled（阻塞）：浏览器得到要发出这个请求的指令，到请求可以发出的等待时间，一般是代理协商、以及等待可复用的TCP连接释放的时间，不包括DNS查询、建立TCP连接等时间等。浏览器对同一个主机域名的并发连接数有限制，因此如果当前的连接数已经超过上限，那么其余请求就会被阻塞，等待新的可用连接；此外脚本也会阻塞其他组件的下载；

DNS Lookup：DNS查询的时间，当本地DNS缓存没有的时候，这个时间可能是有一段长度的，但是比如你一旦在host中设置了DNS，或者第二次访问，由于浏览器的DNS缓存还在，这个时间就为0了

Initial connection：建立TCP连接的时间，就相当于客户端从发请求开始到TCP握手结束这一段，包括DNS查询+Proxy时间+TCP握手时间

SSL：建立TLS连接耗时
Request sent（发送请求）：发送HTTP请求的时间（从第一个字节发出前到最后一个字节发出后的时间）

Waiting(TTFB) ：请求发出后，到收到响应的第一个字节所花费的时间(Time To First Byte)，发送请求完毕到接收请求开始的时间；通常是耗费时间最长的。从发送请求到收到服务器响应的第一字节之间的时间，受到线路、服务器距离等因素的影响
注意：网页重定向越多，TTFB越高，所以要减少重定向

Content Download（下载）：收到响应的第一个字节，到接受完最后一个字节的时间，就是下载时间
image.png

  • ements 标签
    功能介绍
  1. 查看当前页面代码
  2. 通过代码定位页面元素
  3. 点击左上角箭头，通过页面元素快速定位到代码
  • Console 标签
    image.png

功能介绍
用于Web前端代码调试
常用功能如 error 信息打印，info 提示信息打印

  • Security 标签
    Certificate： 证书是否正常，是否与当前域名匹配，是否已到期等
    Connection： 连接是否安全，TLS版本及加密算法描述
    Resources： 资源全部为安全加载，或是否存在混合资源情况（存在部分http资源）
    image.png