摘自：http://www.cnblogs.com/charliechu/p/5948448.html

• 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文件等。

總結

以上是生活随笔為你收集整理的Chrome开发者工具面板功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。