Chrome开发者工具详解(5)-Application、Security、Audits面板

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按钮，将会对当前页面进行网络利用率和页面的性能优化做出诊断，并给出相应的优化建议。

我的博客

个人我的博客