f12控制台功能全面介绍

天宇软件资讯4月2日消息，F12控制台功能全面介绍。

原素（Elements）:用于查阅或修正HTML原素的属性、CSS属性、监听事件、下例等。

能直接页面原素展开CSS、html修正；此修正只会在本地生效；不会上传到伺服器端，所以能用来调试后端编码

控制器（Console）：纪录后端javascript对象、log数据、异常数据

源编码（Sources）:查阅页面的源编码HTML编码，js编码、CSS编码，能直接修正编码展开后端调试

能页面JS编码前面的数字来设置下例；下例能在DOM原素节点发生改变时、XHR开发周期状态改变时、指定的事件执行时被触发

互联网（Network）:与互联网相关的接口命令积极响应和互联网传输等

纪录页面上的互联网命令的详情数据，从发起页面命令Request后分析HTTP命令后得到的各个命令天然资源数据（包括状态、天然资源类型、大小、所用天数、Request和Response等），能根据这个展开互联网操控性优化。

requests Table：

在Timing标识中能显示天然资源在整个命令开发周期过程中各部分天数耗费数据，可能会涉及到如下过程的天数耗费情况：

1、Queuing

排队的天数耗费，可能由于该命令被渲染引擎认为是优先级比较低的天然资源（图片）、伺服器不可用、超过应用程序的mammalian命令的最大相连接数（Chrome的最大mammalian相连接数为6）.

2、Stalled（堵塞）

应用程序对同一个主机ICANN的mammalian相连接数有限制，因此假如当前的相连接数已经超过上限，那么其余命令就会被堵塞，等待捷伊可用相连接；此外JavaScript也会堵塞其他部件的浏览；

优化举措：

1、将天然资源合理分布到多台主机上，能提高mammalian数，但是增加并行浏览数量也会增大开销，这取决于带宽和CPU速度，过多的并行浏览会降低操控性；

2、JavaScript置于页面底部；

3、Proxy Negotiation

与代理伺服器相连接的天数耗费。

4、DNS Lookup

执行DNS查询的天数。页面上每一个捷伊ICANN都要经过一个DNS查询。第二次访问应用程序有缓存的话，则这个天数为0。命令某ICANN下的天然资源，应用程序需要先透过DNS解析器得到该ICANN伺服器的IP地址。在DNS查找完成之前，应用程序不能从主机名那里浏览到任何东西。

优化举措：

1、利用DNS缓存（设置TTL天数）；

2、利用Connection:keep-alive特性建立持久相连接，能在当前相连接上展开多个命令，无需再展开ICANN解析；

5、Initial Connection：

建立相连接的天数耗费，涵盖了TCP握手及重试天数。

6、SSL

http是LZ77传输协议，以明文方式传送文本，不提供任何方式的数据加密，假如被不法分子截取应用程序和伺服器之间的传输报文，会以获取其中的数据。

https 是安全套接字层LZ77传输协议，就是在HTTP的基础上加入了SSL协议，SSL依靠资格证书来验证伺服器的身份，并为应用程序和伺服器之间的通信加密。

因此建立HTTPS相连接的天数相当于三次握手的天数+SSL天数。

7、Request sent （传送命令）

传送HTTP命令的天数（从第一个bit到最后一个bit）

优化举措：

1、减少HTTP命令，能采用CSS Sprites、内联图片、合并JavaScript和样式表等；

2、对不常变化的部件添加长久的Expires头（相当于设置久远的过期天数），在后续的页面浏览中能避免不必要的HTTP命令；

8、Waiting (等待积极响应)

是最初的互联网命令被发起到从伺服器接收到第一个二进制这段天数，它涵盖了TCP相连接天数，传送HTTP命令天数和获得积极响应消息第一个二进制的天数。

通常是耗费天数最长的。从传送命令到收到积极响应之间的空隙，会受到线路、伺服器距离等因素的影响。

优化举措：

1、采用CDN，将用户的访问指向距离最近的工作正常的缓存伺服器上，由缓存伺服器直接积极响应用户命令，提高积极响应速度；

9、Content Download （浏览）

以获取Response积极响应数据的天数耗费。

浏览HTTP积极响应的天数（涵盖头部和积极响应体）

优化举措：

1、透过条件Get命令，对比If-Modified-Since和Last-Modified天数，确定是否采用缓存中的部件，伺服器会返回“304 Not Modified”状态码，减小积极响应的大小；

2、移除重复JavaScript，精简和放大编码，如借助自动化构建工具grunt、gulp等；

3、放大积极响应文本，伺服器端启用gzip放大，能减少浏览天数；

操控性（Performance）:监控该页面的操控性各种指标数据

缓存（Memory）:纪录页面跟随天数的缓存采用情况

存储（Application）:查阅一些本地存储、会话存储、已索引数据库、Cookie、缓存、帧等

安全（Security）:调试当前页面的安全和认证等问题

假如页面是安全的，则会显示这样一条消息：This page is secure (valid HTTPS).。

透过页面View certificate能查阅main origin的伺服器资格证书数据。

页面左侧能查阅指定源的相连接和资格证书详情。

假如页面是不安全的，则会显示：This page is not secure.。

该面板能区分两种类型的不安全的页面：

假如被命令的页面透过HTTP提供服务，那么这个主源就会被标记为不安全。
假如被命令的页面是透过HTTPS以获取的，但这个页面接着透过HTTP继续从其他来源检索文本，那么这个页面仍然被标记为不安全。这就是所谓的混合文本页面,混合文本页面只是部分受到保护,因为HTTP文本(非加密的文本)能被嗅探者入侵,容易受到中间人攻击。

总结

今天就分享到这里吧，天宇软件资讯是一个软件分享基地，其中包括微信,红包辅助,淘米购,酒友购,支付宝,青蛙易购,亲聊,潮豆,惠品铺,惊喜淘,易淘淘,佳讯,优享购,年会,乐汇坊,大海盲盒,QQ,多多联盟,新优海淘,淘益购,苹果微信多开,微信分身,安卓微信多开,夜雨,创信等社交平台的功能有秒,避雷,埋雷软件,单透,扫尾,秒抢等一些红包强项外挂功能软件分享。喜欢的请关注收藏，谢谢。