面板上包含了Elements面板、Console面板、Sources面板、Network面板、
Timeline面板、Profiles面板、Application面板、Security面板、Audits面板這些功能面板。

這些按鈕的功能點如下：

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

Network面板

概述

Network面板可以記錄頁面上的網(wǎng)絡請求的詳情信息，從發(fā)起網(wǎng)頁頁面請求Request后分析HTTP請求后得到的各個請求資源信息（包括狀態(tài)、資源類型、大小、所用時間、Request和Response等），可以根據(jù)這個進行網(wǎng)絡性能優(yōu)化。

我把Google官方網(wǎng)站上介紹Network面板的圖貼到這里，該面板主要包括5大塊