黑白格子

  • 首页
  • 所有文章
  • 文章分类
  • 关于页面
  • 友链

  • 搜索
工具 随笔 脚本 Shell MAC IE SSL iptables 网络 k8s docker ubuntu web 镜像 Nginx Linux Windows cloud-init

F12开发者模式小记

发表于 2021-12-24 | 分类于 Windows | 1 | 阅读次数 359

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
  • 本文作者: 黑白格子
  • 本文链接: https://www.clhuang.cn/?p=78
  • 版权声明: 本博客所有文章除特别声明外,均采用CC BY-NC-SA 4.0 许可协议。转载请注明出处!
# 工具 # 随笔 # 脚本 # Shell # MAC # IE # SSL # iptables # 网络 # k8s # docker # ubuntu # web # 镜像 # Nginx # Linux # Windows # cloud-init
MAC OS上快速修改hosts
黑白格子

黑白格子

56 日志
11 分类
18 标签
Creative Commons
0%
© 2022 黑白格子
主题 - NexT.Mist
网站已稳定运行:
陕ICP备16020191号