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