Chrome開發者工具面板

面板上包含了以下幾個模塊

Elements
查找網頁源代碼 HTML 元素，能夠手動修改任一元素的屬性和樣式且能實時在瀏覽器裏面獲得反饋

Console
記 錄開發者開發過程當中的日誌信息，且能夠做爲與JS進行交互的命令行Shell

Sources
斷點調試JS

Network
從發起網頁頁面請求Request後分析HTTP請求後獲得的各個請求資源信息（包括狀態、資源類型、大小、所用時間等），能夠根據這個進行網絡性能優化

Timeline
記錄並分析在網站的生命週期內所發生的各種事件，以此能夠提升網頁的運行時間的性能

Profiles
若是你須要 Timeline 所能提供的更多信息時，能夠嘗試一下 Profiles 好比記錄JS CPU執行時間細節、顯示JS對象和相關的 DOM節點的內存消耗、記錄內存的分配細節

Application
記錄網站加載的全部資源信息，包括存儲數據（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、緩存數據、字體、圖片、腳本、樣式表等

Security
判斷當前網頁是否安全

Audits
對當前網頁進行網絡利用狀況、網頁性能方面的診斷，並給出一些優化建議。好比列出全部沒有用到的CSS文件等