Chrome開(kāi)發(fā)者工具詳解(5)-Application、Security胡诗、Audits面板
這篇文章是Chrome開(kāi)發(fā)者工具詳解這一系列的最后一篇邓线，介紹DevTools最后的三個(gè)面板功能-Application面板、Security面板煌恢、Audits面板的基本功能：
Application面板簡(jiǎn)介
該面板主要是記錄網(wǎng)站加載的所有資源信息骇陈，包括存儲(chǔ)數(shù)據(jù)（Local Storage、Session Storage瑰抵、IndexedDB你雌、Web SQL、Cookies）二汛、緩存數(shù)據(jù)婿崭、字體、圖片习贫、腳本逛球、樣式表等。
這個(gè)面板跟前前面幾道硬菜（Network面板苫昌、Timeline面板颤绕、Profiles面板）比起來(lái)簡(jiǎn)單多了幸海，這里就稍微作一下介紹：
- Local Storage 如果你在開(kāi)發(fā)過(guò)程中使用了local storage來(lái)存儲(chǔ)鍵值對(duì)(KVPs)，那么你就可以通過(guò)Local Storage窗格來(lái)檢查奥务、新增物独、修改、刪除這個(gè)鍵值對(duì)氯葬。
- Application Cache 你可以使用Application Cache窗格去查看通過(guò)Application Cache API創(chuàng)建的資源挡篓。
- Frames 將頁(yè)面上的資源按frame類別進(jìn)行組織顯示。
Frames窗格
在上圖中可以查看到頂級(jí)的top是一個(gè)主文檔帚称，在top下面是主文檔的Fonts官研、Images、Scripts闯睹、Stylesheets等資源戏羽。最后一個(gè)就是主文件自身。
在資源上右擊后在彈出菜單選擇Reveal in Network Panel楼吃，就會(huì)跳轉(zhuǎn)到Network面板并定位到該資源的位置始花。
你也可以在Sources面板里面按frame類別來(lái)查看資源信息。
Security面板簡(jiǎn)介
通過(guò)該面板你可以去調(diào)試當(dāng)前網(wǎng)頁(yè)的安全和認(rèn)證等問(wèn)題并確保您已經(jīng)在你的網(wǎng)站上正確地實(shí)現(xiàn)HTTPS孩锡。
HTTPS（Hyper Text Transfer Protocol over Secure Socket Layer）酷宵，是以安全為目標(biāo)的HTTP通道，簡(jiǎn)單講是HTTP的安全版躬窜。即HTTP下加入SSL層浇垦，HTTPS的安全基礎(chǔ)是SSL，因此加密的詳細(xì)內(nèi)容就需要SSL斩披。 它是一個(gè)URI scheme（抽象標(biāo)識(shí)符體系）溜族，句法類同http:體系。用于安全的HTTP數(shù)據(jù)傳輸垦沉。https:URL表明它使用了HTTP，但HTTPS存在不同于HTTP的默認(rèn)端口及一個(gè)加密/身份驗(yàn)證層（在HTTP與TCP之間）仍劈。
HTTPS和HTTP的區(qū)別主要為以下四點(diǎn)：
① https協(xié)議需要到CA申請(qǐng)證書(shū)厕倍，一般免費(fèi)證書(shū)很少，需要交費(fèi)贩疙。
② http是超文本傳輸協(xié)議讹弯，信息是明文傳輸，https則是具有安全性的ssl加密傳輸協(xié)議这溅。
③ http和https使用的是完全不同的連接方式组民，用的端口也不一樣，前者是80悲靴，后者是443臭胜。
④ http的連接很簡(jiǎn)單，是無(wú)狀態(tài)的；HTTPS協(xié)議是由SSL+HTTP協(xié)議構(gòu)建的可進(jìn)行加密傳輸耸三、身份認(rèn)證的網(wǎng)絡(luò)協(xié)議乱陡，比http協(xié)議安全。
如果網(wǎng)頁(yè)是安全的仪壮，則會(huì)顯示這樣一條消息：This page is secure (valid HTTPS).憨颠。
通過(guò)點(diǎn)擊View certificate可以查看main origin的服務(wù)器證書(shū)信息。
點(diǎn)擊左側(cè)可以查看指定源的連接和證書(shū)詳情积锅。
如果網(wǎng)頁(yè)是不安全的爽彤，則會(huì)顯示：This page is not secure.。
該面板可以區(qū)分兩種類型的不安全的頁(yè)面：
- 如果被請(qǐng)求的頁(yè)面通過(guò)HTTP提供服務(wù)缚陷，那么這個(gè)主源就會(huì)被標(biāo)記為不安全淫茵。
- 如果被請(qǐng)求的頁(yè)面是通過(guò)HTTPS獲取的，但這個(gè)頁(yè)面接著通過(guò)HTTP繼續(xù)從其他來(lái)源檢索內(nèi)容蹬跃，那么這個(gè)頁(yè)面仍然被標(biāo)記為不安全匙瘪。這就是所謂的混合內(nèi)容頁(yè)面,混合內(nèi)容頁(yè)面只是部分受到保護(hù),因?yàn)镠TTP內(nèi)容(非加密的內(nèi)容)可以被嗅探者入侵,容易受到中間人攻擊。
點(diǎn)擊左側(cè)則提供一個(gè)跳轉(zhuǎn)到Network面板視圖的鏈接信息蝶缀。
中間人攻擊(Man-in-the-Middle Attack,"MITM攻擊")是一種“間接”的入侵攻擊丹喻，這種攻擊模式是通過(guò)各種技術(shù)手段將受入侵者控制的一臺(tái)計(jì)算機(jī)虛擬放置在網(wǎng)絡(luò)連接中的兩臺(tái)通信計(jì)算機(jī)之間，這臺(tái)計(jì)算機(jī)就稱為“中間人”翁都。
Audits面板簡(jiǎn)介
對(duì)當(dāng)前網(wǎng)頁(yè)進(jìn)行網(wǎng)絡(luò)利用情況碍论、網(wǎng)頁(yè)性能方面的診斷，并給出一些優(yōu)化建議柄慰。比如列出所有沒(méi)有用到的CSS文件等鳍悠。
選中Network Utilization、Web Page Performance坐搔，點(diǎn)擊Run按鈕藏研，將會(huì)對(duì)當(dāng)前頁(yè)面進(jìn)行網(wǎng)絡(luò)利用率和頁(yè)面的性能優(yōu)化作出診斷，并給出相應(yīng)的優(yōu)化建議概行。
