Chrome开发者工具详解(5)-Application、Security、Audits面板
这篇文章是Chrome开发者工具详解 这一系列的最后一篇,介绍DevTools最后的三个面板功能-Application 面板、Security 面板、Audits 面板的基本功能:
Application面板简介
该面板主要是记录网站加载的所有资源信息,包括存储数据(Local Storage、Session Storage、IndexedDB、Web SQL、Cookies)、缓存数据、字体、图片、脚本、样式表等。
这个面板跟前前面几道硬菜(Network面板、Timeline面板、Profiles面板)比起来简单多了,这里就稍微作一下介绍:
Local Storage 如果你在开发过程中使用了local storage来存储键值对(KVPs),那么你就可以通过Local Storage窗格来检查、新增、修改、删除这个键值对。
Application Cache 你可以使用Application Cache窗格去查看通过Application Cache API创建的资源。
Frames 将页面上的资源按frame类别进行组织显示。
Frames窗格
在上图中可以查看到顶级的top 是一个主文档,在top下面是主文档的Fonts 、Images 、Scripts 、Stylesheets 等资源。最后一个就是主文件自身。
在资源上右击后在弹出菜单选择Reveal in Network Panel ,就会跳转到Network 面板并定位到该资源的位置。
你也可以在Sources 面板里面按frame类别来查看资源信息。
Security面板简介
通过该面板你可以去调试当前网页的安全和认证等问题并确保您已经在你的网站上正确地实现HTTPS。
HTTPS(Hyper Text Transfer Protocol over Secure Socket Layer) ,是以安全为目标的HTTP通道,简单讲是HTTP的安全版。即HTTP下加入SSL层,HTTPS的安全基础是SSL,因此加密的详细内容就需要SSL。 它是一个URI scheme(抽象标识符体系),句法类同http:体系。用于安全的HTTP数据传输。https:URL表明它使用了HTTP,但HTTPS存在不同于HTTP的默认端口及一个加密/身份验证层(在HTTP与TCP之间)。
HTTPS和HTTP的区别主要为以下四点:
① https协议需要到CA申请证书,一般免费证书很少,需要交费。
② http是超文本传输协议,信息是明文传输,https则是具有安全性的ssl加密传输协议。
③ http和https使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443。
④ http的连接很简单,是无状态的;HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,比http协议安全。
如果网页是安全的,则会显示这样一条消息:This page is secure (valid HTTPS). 。
通过点击View certificate 可以查看main origin 的服务器证书信息。
点击左侧可以查看指定源的连接和证书详情。
如果网页是不安全的,则会显示:This page is not secure. 。
该面板可以区分两种类型的不安全的页面:
如果被请求的页面通过HTTP提供服务,那么这个主源就会被标记为不安全。
如果被请求的页面是通过HTTPS获取的,但这个页面接着通过HTTP继续从其他来源检索内容,那么这个页面仍然被标记为不安全。这就是所谓的混合内容 页面,混合内容页面只是部分受到保护,因为HTTP内容(非加密的内容)可以被嗅探者入侵,容易受到中间人攻击 。
点击左侧则提供一个跳转到Network 面板视图的链接信息。
中间人攻击 (Man-in-the-Middle Attack,"MITM攻击")是一种“间接”的入侵攻击,这种攻击模式是通过各种技术手段将受入侵者控制的一台计算机虚拟放置在网络连接中的两台通信计算机之间,这台计算机就称为“中间人”。
Audits面板简介
对当前网页进行网络利用情况、网页性能方面的诊断,并给出一些优化建议。比如列出所有没有用到的CSS文件等。
选中Network Utilization 、Web Page Performance ,点击Run 按钮,将会对当前页面进行网络利用率和页面的性能优化作出诊断,并给出相应的优化建议。
个人博客
我的个人博客
运维网声明
1、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表,该帖子作者与运维网 享有帖子相关版权
3、所有作品的著作权均归原作者享有,请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意,请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息,一经发现立即删除。若您因此触犯法律,一切后果自负,我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责,亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏,不得用于商业或者其他用途,否则,一切后果均由您自己承担,我们对此不承担任何法律责任
7、如涉及侵犯版权等问题,请您及时通知我们,我们将立即采取措施予以解决
8、联系人Email:admin@iyunv.com 网址:www.yunweiku.com