面板上包含了Elements面板、Console面板、Sources面板、Network面板、
Timeline面板、Profiles面板、Application面板、Security面板、Audits面板這些功能面板。
這些按鈕的功能點(diǎn)如下：
- Elements:查找網(wǎng)頁(yè)源代碼HTML中的任一元素,手動(dòng)修改任一元素的屬性和樣式且能實(shí)時(shí)在瀏覽器里面得到反饋。
- Console:記錄開發(fā)者開發(fā)過程中的日志信息，且可以作為與JS進(jìn)行交互的命令行Shell。
- Sources:斷點(diǎn)調(diào)試JS。
- Network:從發(fā)起網(wǎng)頁(yè)頁(yè)面請(qǐng)求Request后分析HTTP請(qǐng)求后得到的各個(gè)請(qǐng)求資源信息（包括狀態(tài)、資源類型、大小、所用時(shí)間等），可以根據(jù)這個(gè)進(jìn)行網(wǎng)絡(luò)性能優(yōu)化。
- Timeline:記錄并分析在網(wǎng)站的生命周期內(nèi)所發(fā)生的各類事件，以此可以提高網(wǎng)頁(yè)的運(yùn)行時(shí)間的性能。
- Profiles:如果你需要Timeline所能提供的更多信息時(shí)，可以嘗試一下Profiles,比如記錄JS CPU執(zhí)行時(shí)間細(xì)節(jié)、顯示JS對(duì)象和相關(guān)的DOM節(jié)點(diǎn)的內(nèi)存消耗、記錄內(nèi)存的分配細(xì)節(jié)。
- Application:記錄網(wǎng)站加載的所有資源信息，包括存儲(chǔ)數(shù)據(jù)（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、緩存數(shù)據(jù)、字體、圖片、腳本、樣式表等。
- Security:判斷當(dāng)前網(wǎng)頁(yè)是否安全。
- Audits:對(duì)當(dāng)前網(wǎng)頁(yè)進(jìn)行網(wǎng)絡(luò)利用情況、網(wǎng)頁(yè)性能方面的診斷，并給出一些優(yōu)化建議。比如列出所有沒有用到的CSS文件等。
Network面板
概述
Network面板可以記錄頁(yè)面上的網(wǎng)絡(luò)請(qǐng)求的詳情信息，從發(fā)起網(wǎng)頁(yè)頁(yè)面請(qǐng)求Request后分析HTTP請(qǐng)求后得到的各個(gè)請(qǐng)求資源信息（包括狀態(tài)、資源類型、大小、所用時(shí)間、Request和Response等），可以根據(jù)這個(gè)進(jìn)行網(wǎng)絡(luò)性能優(yōu)化。
我把Google官方網(wǎng)站上介紹Network面板的圖貼到這里，該面板主要包括5大塊
