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

我的博客

個人我的博客