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按鈕，將會對當前頁面進行網絡利用率和頁面的性能優化作出診斷，並給出相應的優化建議。
